2019/8/29，day04，web前端

菜鸟小笔记3

2019年8月29日周四 20:57 重庆
以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~

今日内容

1、常用样式规则(day04里“CSS常用样式规则-边距.html”)
①边框（border：宽度 样式 颜色）
②边框圆角（border-radius：数字+单位）
③边距
外边距与内边距的区别：

• 外边距是元素之间的距离，而内边距是内容与边界的距离；
• 外边距不会增加元素本身宽高，而内边距则会增加自身宽高

何时使用内外边距

• 外边距设置在子级元素上且父级元素没有外边距或者未脱离文档流的情况之下，子级元素的外边距会作用与父级元素之上，此时若想拉开子级元素和父级元素的距离，应用内边距
• 内边距在需要给元素增加宽度或者高度时使用，可直接设置内容在一定区域之内居中并且不需要设置固定宽高，可由内容决定

边距方向设置

• 边距属性名+top/left/right/bottom:数字+单位
• (四个取值) 边距名： 上边距 右边距 下边距 左边距;
• (三个取值) 边距名： 上边距 左右边距 下边距;
• (两个取值)上下边距 左右边距;
• (一个取值) 边距名：上下左右边距;

④ 盒子模型（box-sizing）

• content-box(内容盒子模型/默认值)
• 1. 元素网页显示宽高 = 宽高 + 内边距 + 边框
  2. 元素网页实际宽高 = 宽高 + 内边距 + 边框 + 外边距
• border-box(边框盒子模型)
• 1. 元素网页显示宽高 = 宽高(边框与内边距会压缩内容)
  2. 元素网页实际宽高 = 宽高 + 外边距
• content-box VS border-box
• 1. content-box元素宽高不可控，border-box一旦设置宽高，就固定死了宽高，不会随着内边距和边框的增加而发生宽度与高度的改变
  2. 没有设置固定宽高时，没有content-box与border-box，但通常网页编写都会将所有的元素设置borderbox，方便计算

*{margin: 0;padding: 0;}
        .box01,.box02{
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 10px;
        }
        .box01{
            background: blue;
            border: 5px solid pink;
            box-sizing: content-box;
        }
        .box02{
            background: red;
            border: 5px solid orange;
            box-sizing: border-box;
        }
        ·
        ·
        <div class="box01">box-sizing:content-box</div>
        <div class="box02">box-sizing:boder-box</div>

⑤元素转换属性（display）

• block（块级元素显示）
• inline（行内元素显示）
• inline-block（行内块级元素显示）
• none（空即没有）

注意行内元素与行内块级元素受文本对齐属性控制

⑥背景图片覆盖

• repeat（图片重复(默认值)）
• repeat-x（沿x轴重复）
• repeat-y（沿y轴重复）
• no-repeat（不重复）

⑦ 背景图片定位（background-position：X轴偏移值 Y轴偏移值）

• 偏移值取值：（数字+单位）
• 1. X轴正值向右，负值向左
  2. y轴正值向下，负值向上
• 偏移值取值：（单词）
• 1. x轴：left/center/right
  2. y轴：top/center/bottom

以上属性简写background: url("") repeat position color;

⑧背景图片大小（background-size）

• 取值：数字+单位
• 取值：cover（横向填充直至铺满）

⑨ 背景图片固定（background-attachment：fixed）

*{margin: 0;padding: 0;box-sizing: border-box}
        html,body{
            width: 100%;
            height: 100%;
        }
        .box01,.box02,.box03{
            width: 100%;
            height: 100%;
        }
        .box01{
            background: url("image/img05.jpg") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
        }
        .box02{
            background: url("image/img06.jpg") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
        }
        .box03{
            background: url("image/img07.jpg") no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
        }
        ···
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>

⑩透明属性（opacity：0-1）

2、 浮动布局（元素脱离文档流，进行横向排列则是浮动，即解决行内块级元素默认间距）
浮动只适用PC端且浮动不会对图片、文字进行覆盖
①浮动带来的影响（day04里“浮动带来的影响.html”）

• 浮动元素周围会自动排列未浮动的文字或者图片
• 子级元素浮动，父级未浮动，父级元素无法随着子级的高度而增加自身高度

②清除浮动（clear有五种方法）

• 同级别清除（clear：left/right/both）
• 子级元素浮动，父级无高度
• 1. 给父级元素添加高度
  2. 在父级元素的末尾自行编写一个块级元素，无宽高，无内容，添加clear属性即可
  3. 给父级元素添加内容溢出属性为隐藏，如 parentNode{overflow:hidden;} （parentNode指父级元素）
  4. 利用伪类选择器清除

parentNode:after{
        content: "";
        display: block;
        clear: both;
       }

今日份收获

1、如何查看图片坐标与宽高：

• 打开PS；
• ctrl+K 打开首选项》“单位与标尺”》将“单位”下的“标尺”“文字”的单位都改为“厘米”；
• Fn+F8 打开属性信息;
• 打开标尺，将其x和y轴都对准图片的“最x点”“最y点”；

# 注意事项

1. content-box、border-box
2. clear有五种方法
3. 背景图片固定（background-attachment：fixed）
4. day04下的“CSS常用属性-背景图片.html”很有意思
5. margin:0;padding:0;clear：left 因为p有默认间距（可在html里寻找查看相关案例，即*先设置）

作业

1、classwork和classworkT试试结合（类选择器的叠加没有熟练，致老师代码比自己的简洁）且多个相同div复制时出现“一个div一个div复制会出现错乱”，整理时可见。
2、做网页顶部时错误，待下次一起整理，同学在阅时自己有很多没用的代码。

补充

1. 内边距会改变自身宽高
   行内元素无法设置宽高

快捷键webstorm

1、同一文本不同位置一次粘贴：需要复制的文本ctrl+c，按住alt 用光标点需要 ctrl+v的位置