一. 盒子模型
CSS会把所有的 HTML元素都看成一个盒子,所有的样式也都是基于这个盒子。
盒子的大小= content +左右padding +左右border
默认宽度:所谓的默认宽度,就是不设置width属性时,元素所呈现出来的宽度。
- 总宽度=父的 content - 自身的左右margin 。
- 内容区的宽度= 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding 。
1.margin(外边距)
- margin:盒子与外界的距离。
- margin注意事项:
-
- 子元素的margin,是参考父元素的content计算的。(因为是父亲的content中承装着子元素)
- 上margin、左margin:影响自己的位置;下margin、右margin:影响后面兄弟元素的位置。
- 块级元素、行内块元素,均可以完美地设置四个方向的margin;但行内元素,左右margin可以完美设置,上下margin设置无效。
- margin的值也可以是 auto,如果给一个块级元素设置左右margin都为 auto,该块级元素会在父元素中水平居中。
- margin的值可以是负值。
- margin塌陷问题
-
- 描述:第一个子元素的上margin 会作用在父元素上,最后一个子元素的下margin 会作用在父元素上
- 解决margin塌陷
-
-
- 方案一:给父元素设置不为0的 padding
- 方案二:给父元素设置宽度不为0的border
- 方案三:给父元素设置CSS样式 overflow: hidden;
-
- margin合并问题
-
- 描述:上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。
- 解决:无需解决合并问题,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。
2.border(边框)
- border:盒子的边框。
3.padding (内边距)
- padding:紧贴内容的补白区域。
- padding复合属性的使用规则
-
- 二个值:上下,左右
- 三个值:上,左右,下
- 四个值:上,右,下,左
- 行内元素的左右内边距是没问题的,上下内边距不能完美的设置。
4.content(内容)
- content:元素中的文本或后代元素都是它的内容。
- overflow处理内容溢出问题:
-
- visible :显示,默认值
- hidden:隐藏
- scroll:显示滚动条,不论内容是否溢出
- auto:自动显示滚动条,内容不溢出不显示
- 隐藏元素:
-
- 方式一: visibility属性,visibility属性默认值是show,如果设置为hidden,元素会隐藏。元素看不见了,还占有原来的位置(元素的大小依然保持)。
- 方式二:display属性,设置display: none; ,就可以让元素隐藏。彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。
5.新增属性
- box-sizing:怪异盒模型
-
- content-box:width和height设置的是盒子内容区的大小。(默认值)
- border-box:width和height设置的是盒子总大小。(怪异盒模型)
- resize:调整盒子大小
-
- 注意:需要与overflow配合使用
- none:不允许用户调整元素大小。(默认)
- both:用户可以调节元素的宽度和高度。
- horizontal:用户可以调节元素的宽度。
- vertical:用户可以调节元素的高度。
- box-shadow:盒子阴影
-
- h-shadow:水平阴影的位置,必须填写,可以为负值
- v-shadow:垂直阴影的位置,必须填写,可以为负值
- blur:可选,模糊距离
- spread:可选,阴影的外延值
- color:可选,阴影的颜色
- inset:可选,将外部阴影改为内部阴影
- opacity:不透明度
-
- opacity属性能为整个元素添加透明效果,值是0到1之间的小数,0是完全透明,1表示完全不透明。
- opacity 与 rgba 的区别:opacity 是一个属性,设置的是整个元素(包括元素里的内容)的不透明度。rgba 是颜色的设置方式,用于设置颜色,它的透明度,仅仅是调整颜色的透明度。
二. 浮动
1.元素浮动的特点
- 脱离文档流。
- 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高。
- 不会独占一行,可以与其他元素共用一行。
- 不会margin合并,也不会margin塌陷,能够完美的设置四个方向的margin和padding 。
- 不会像行内块—样被当做文本处理(没有行内块的空白问题)。
2.浮动产生的影响
- 对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
- 对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。
3.清除浮动产生的影响
- 方案一:给父元素指定高度
- 方案二:给父元素也设置浮动,带来其他影响。
- 方案三:给父元素设置overflow:hidden
- 方案四:在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置clear: both
- 方案五:给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===>推荐使用
.parent::after {
content: '';
display: block;
clear: both;
}
- 布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。
三.定位
1.相对定位
- 1.1 设置相对定位position : relative
-
- 可以使用left .right . top . bottom四个属性调整位置。
- 参考自己原来的位置
- 1.2 相对定位的特点:
-
- 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
-
-
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素,后写的元素会盖在先写的元素之上。
-
-
- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 相对定位的元素,也能继续浮动,但不推荐这样做。
- 相对定位的元素,也能通过margin调整位置,但不推荐这样做。
- 1.3 绝大多数情况下,相对定位,会与绝对定位配合使用。
2.绝对定位
- 2.1 设置相对定位position : absolute
-
- 可以使用left .right . top . bottom四个属性调整位置。
- 参考包含块位置
-
-
- 对于没有脱离文档流的元素:包含块就是父元素;
- 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。
-
- 2.2 绝对定位元素的特点:
-
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
- 绝对定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、 行内块、块级)设置为绝对定位之后,都变成了定位元素。
-
-
- 定位元素:默认宽、 高都被内容所撑开,且能自由设置宽高。
-
3.固定定位
- 3.1 设置固定定位position : fixed
-
- 可以使用left .right . top . bottom四个属性调整位置。
- 参考视口的位置
- 3.2 固定定位元素的特点
-
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
- 固定定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
4.粘性定位
- 4.1 设置粘性定位position : sticky
-
- 可以使用left .right . top . bottom四个属性调整位置。
- 参考位置:离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先
- 4.2 粘性定位元素的特点
-
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是top值。
- 粘性定位和浮动可以同时设置,但不推荐这样做。
- 粘性定位的元素,也能通过margin调整位置,但不推荐这样做。
- 粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
5.定位层级
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是-样的。
- 如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
- 可以通过css属性z-index调整元素的显示层级。
- z-index的属性值是数字,没有单位,值越大显示层级越高。
- 只有定位的元素设置z-index 才有效。
- 如果z-index值大的元素,依然没有覆盖掉z-index值小的元素,那么请检查其包含块的层级。
6.特殊应用
发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
- 应用一:让定位元素的宽充满包含块
-
- 块宽想与包含块一致, 可以给定位元素同时设置left 和right 为 0。
- 高度想与包含块一致,top 和bottom设置为0。
- 应用二:让定位元素在包含块中居中(该定位元素必须设置宽高)
/* 方法一 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* 方法二 */
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
四.布局
1.版心
- 在PC端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心。
- 版心的宽度一般是960~1280像素之间。
- 版心可以是一个,也可以是多个。
2.常用布局名词
顶部导航条 | topbar |
页头 | header ,page-header |
导航 | nav 、 navigator .navbar |
搜索框 | search . search-box |
横幅、广告、宣传图 | banner |
主要内容 | content . main |
侧边栏 | aside . sidebar |
页脚 | footer . page-footer |
3.重置默认样式
- 方案一:使用全局选择器
* {
padding: 0;
margin: 0;
}
- 方案二:reset.css(定制化)
- 方案三:Normalize.css(标准化) Normalize.css: Make browsers render all elements more consistently.
-
- Normalize.css是一种最新方案,它在清除默认样式的基础上,保留了一些有价值的默认样式。
- 相对于reset.css , Normalize.css有如下优点:
-
-
- 保护了有价值的默认样式,而不是完全去掉它们。
- 为大部分HTML元素提供一般化的样式。
- 新增对HTML5元素的设置。
- 对并集选择器的使用比较谨慎,有效避免调试工具杂乱。
-
-
- 备注: Normalize.css的重置,和reset.css相比,更加的温和,开发时可根据实际情况进行选择。
4..布局的小技巧
- 行内元素、行内块元素,可以被父元素当做文本处理。
-
- 即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。例如: text-align . line-height . text-indent等。
- 如何让子元素,在父亲中水平居中:
-
- 若子元素为块元素,给父元素加上: margin: 0 auto;
- 若子元素为行内元素、行内块元素,给父元素加上:text-align: center;
- 如何让子元素,在父亲中垂直居中:
-
- 若子元素为块元素,给子元素加上: margin-top,值为:(父元素content - 子元素盒子总高)/2。
-
-
- overflow: hidden; 解决塌陷问题
-
-
- 若子元素为行内元素、行内块元素:
-
-
- 让父元素的height = line-height,每个子元素都加上: vertical-align:middle;。
- 补充:若想绝对垂直居中,父元素font-size设置为0。
-
- 元素中间的空白问题
-
- 描述:行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
- 解决:给父元素设置font-size:0,再给需要显示文字的元素,单独设置字体大小(推荐)。
- 行内块的幽灵空白问题
-
- 描述:行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
- 解决方案:
-
-
- 方案一:给行内块设置vertical,值不为 baseline即可,设置为middle、bottom、top均可。
- 方案二:若父元素中只有一张图片,设置图片为display: block 。
- 方案三:给父元素设置font-size: 0。如果该行内块内部还有文本,则需单独设置font-size。
-
5.多列布局
作用:专门用于实现类似于报纸的布局。还可以应用图片
- column-count:指定列数,值是数字。
- column-width :指定列宽,值是长度。
- columns :同时指定列宽和列数,复合属性;值没有数量和顺序要求。
- column-gap∶设置列边距,值是长度。
- column-rule-style :设置列与列之间边框的风格,值与border-style 一致。
- column-rule-width:设置列与列之间边框的宽度,值是长度。
- column-rule-color :设置列与列之间边框的颜色。
- coumn-rule︰设置列边框,复合属性。
- column-span:指定是否跨列;值:none . all。