菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css闫鹏波20230209 [打印本页]

作者: mx60075 时间: 2023-2-9 23:41
标题: css闫鹏波20230209
CSS的传统布局方式
普通流（标准流）
      比如说块级盒子自己占一行，行内元素一行会显示多个，标准流就是最基本的布局方式。
浮动
定位
浮动
为什么需要浮动？
      可以让多个盒子水平排列成一行，而且中间没有空白间隙
浮动的属性
      float
         属性值
            none 元素没有浮动（默认值）
            left 左浮动
            right 右浮动
注意点
      在网页布局时，纵向找标准流，横向找浮动。
浮动的特性
      浮动的元素会脱离标准流（脱标）
      浮动的元素一行内显示并且沿元素顶部对齐
      浮动的元素会行内块元素的特定
      浮动的盒子会压住后面的标准流盒子，但是不会压住文字（原因是：浮动的技术研发之初就是为了实现文字环绕的）
      浮动的盒子只会影响它后面的标准流，不会影响前面的标准流。
浮动的注意点
      1、浮动的盒子和标准流盒子搭配的方法
         父级盒子用标准流进行上下排列，子盒子采用浮动来进行横向排列
      2、一个元素浮动了，理论上其余的兄弟元素也都需要浮动
         因为浮动的盒子会脱标，如果兄弟盒子只浮动了一个，那么会影响后面的其他兄弟盒子。
清除浮动
1、额外标签法
      额外标签法也称为隔墙法，是W3C推荐的做法。
      在浮动元素的末尾添加一个空标签，这个空标签要求必须是块级元素。
2、给父级添加overflow:hidden属性
3、给父级添加after伪元素
4、给父级添加双伪元素
CSS的盒子阴影
CSS中使用box-shadow属性
      属性值：
         h-shadow 必须值水平阴影位置
         v-shadow 必须值垂直阴影位置
         blur  可选  模糊距离
         spread 可选阴影尺寸
         color 可选  阴影颜色
         inset  可选将外部阴影改为内部阴影默认值是outset 但是outset不能写在box-shadow中，否则阴影失效。
注意：盒子阴影不会占用空间，不会影响其他盒子的排列

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)