当前位置:首页 > 自学前端 > CSS > CSS教程 三个重点(盒模型、浮动、固定)

CSS教程 三个重点(盒模型、浮动、固定)

刘广法2022年04月12日 09:58:47CSS3180
CSS教程 三个重点(盒模型、浮动、固定)-第1张图片-刘广法IT博客

CSS教程 三个重点:

1、盒模型

box-model

CSS教程 三个重点(盒模型、浮动、固定)-第2张图片-刘广法IT博客

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。

  • Content(内容) - 盒子的内容,显示文本和图像。

注意:设置背景颜色的时候,边框是有颜色的

背景图常用的样式:

  1. background-color:pink;    背景颜色

  2. background-imager:url(url地址);    背景图片

    1. overflow-x: hidden;

    2. overflow-y: hidden;

  3. background-repeat:no-repeat;    背景图片是否平铺

    1. no-repeat:不平铺

    2. repeat-x:x轴平铺

    3. repeat-y:y轴平铺

    4. repeat:平铺

  4. background-size:auto 100%;    背景图片的大小

    1. 第一个参数是x轴

    2. 第二个参数是y轴

    3. auto:

    4. 百分比/像素:

    5. cover:覆盖下面的面积

  5. background-position:    背景图片显示位置

    1. left:左

    2. center:中

    3. right:右

    4. top:上

    5. bottom:下

行内元素和块元素的转化:

display:inline;    显示成行内元素

display:none;    不显示,完全释放空间

display:block;    显示成块元素

display:inline-block;    在一行中显示块元素,但是可以设置尺寸

注意事项:内联元素不能设置尺寸,尺寸是由内容决定的。

2、浮动:破坏默认的文档的布局 float

默认的文档的布局:

1、块元素垂直排列,从上向下

2、行内元素,从左向右排列

浮动元素遵守浮动布局规则:

1、需要定义尺寸

2、按照定义的顺序。left向左浮动;right向右浮动

3、浮动元素会释放原占有的空间。

清除浮动:

1、必须是块元素才能清楚浮动

2、必须是浮动的兄弟元素,在所有的浮动元素之后。

3、添加clear样式

3、定位:position

功能强大,破坏默认的文档流布局,可以让一个元素定位到页面的任意位置。

定位遵循的定义规则:

1、定义的位置

2、自定义定位的样式


1、绝对定位:absolute

参照物:从当前元素的父元素开始向上查找,第一个非static定位的元素为参照物,如果找不到,则以body为参照物。

2、相对定位:relative

参照物:以未偏移之前的位置,为参照物

3、固定定位:fixed

参照物:以视区(可视区域)为参照物。

来源:刘广法博客,请注意转载出处,网站地址为:https://liuguangfa.com/

扫描二维码推送至手机访问。

版权声明:本文由刘广法博客发布,如需转载请注明出处。

本文链接:https://liuguangfa.com/css/169.html

分享给朋友:

“CSS教程 三个重点(盒模型、浮动、固定)” 的相关文章

CSS教程 颜色的选择

css的颜色机制:rgb颜色机制rgb表示法:1、red(红)、blue(蓝)、freen(绿),任何的颜色都是通过三种颜色进行搭配而来的,不支持透明。2、任何颜色都是通过red、blue、freen 三种颜色搭配而来,最多使用255份,如:rgb(255,255,255)十六进制表示法:1、#ff...

CSS教程 关于css的相关基础知识点

CSS教程 相关知识点css:全称:Cascde Style Sheet ,层叠样式表用于细粒化的调整html元素的样式或修饰。css的只要作用就是负责html的样式修饰的。css的三种引入方式:1、行内样式:使用style 修饰所在的行,缺点:如果多个标记样式一样,无法简化。2、页内样式:使用st...

CSS教程 CSS的选择器

CSS教程 CSS的选择器基础选择器:1、标记选择器:直接标记即可2、id选择器:用定义的id3、类选择器:用定义的类,一个标记可以使用多个类4、模糊选择器:全选选择器,一般不单独使用。高级选择器:(a 和 b 都是基础选择器)1、子代选择器:a>b,选中某个元素的子元素2、后代选择器:a b...

CSS教程 css常用的单词和css中常用的样式

CSS常用的样式:块元素:width,宽度。height:高度,单位可以是px,也可以是百分比。background-color:背景色。color:前景色 font-weight:字重,表示字体的粗细,一般常用normal,bold text-decoration:overli...

CSS教程合集

css学习教程CSS教程 关于css的相关基础知识点     CSS教程 颜色的选择CSS教程 CSS的选择器CSS教程 css常用的单词和css中常用的样式CSS教程 三个重点(盒模型、浮动、固定)     CSS教程 设置一个导航栏&n...

CSS教程 设置一个导航栏

CSS教程 设置一个导航栏一、通过把块元素转化成行内元素二、通过浮动然后按下浮动三、通过固定来控制一、把块状元素转化成行内元素:1、list-style-tyoe:nome;    列表符号类型,可以转换成有序列表,也可以省略列表符号。2、text-decor...

CSS教程 等分的两种方法

CSS教程 等分的两种方法一、通过增加一个边框进行设置:可以匹配低版本css二、通过calc()进行函数运算:一、通过增加一个边框进行设置:可以匹配低版本css<!DOCTYPE html> <html> <head> <meta&nb...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。