【web前端开发

更新时间:2023-04-03 20:43:52 阅读：评论：0

思维导图

一：圆角边框

border-radius:length;（50px 或50% 之类都可）

该属性是一个简写属性
可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

二：阴影

1. 盒子阴影

box-shadow: h-shadow v-shadow blur spread color int;

属性描述h-shadow必须，水平阴影位置，可取负值v-shadow必须，垂直阴影位置，可取负值blur可选，模糊程度，模糊距离spread可选，模糊范围，模糊的尺寸color可选，阴影颜色int改为内部阴影

outt(外部阴影)：默认，但一般不写，二般也不写，写了就不显示阴影了

2:文字阴影

text-shadow: h-shadow v-shadow blur color;

具体参考盒子阴影那个表格（ctrl c , ctrl v）

三：浮动

1：常见的三种传统页面布局的方式

①普通流（标准流）

所谓的标准流: 就是标签按照规定好默认方式排列。

块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

2：浮动

2.1：为什么需要浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用：可以让多个块级元素一行内排列显示。

2.2：什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 { float: 属性值; }

属性描述none不浮动（默认）left向左侧浮动right向右侧浮动

2.3：浮动的特性

① 浮动元素会脱离标准流(脱标)

▷脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
▷浮动的盒子不再保留原先的位置

② 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
③ 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

▷如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
▷浮动的盒子中间是没有缝隙的，是紧挨着一起的
▷行内元素同理

【叽叽歪歪】为了约束浮动元素位置, 一般先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。

四：清除浮动

2017年江西高考分数线1：为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

2：清除浮动的方法

2.1：额外标签法也称为隔墙法

额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

▷优点：通俗易懂，书写方便
▷缺点：添加许多无意义的标签，结构化较差

注：要求这个新的空标签必须是块级元素。

2.2：父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

▷优点：代码简洁
▷缺点：无法显示溢出的部分

2.3：父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加

 .clearfix:after {       content: "";     display: block;     height: 0;     clear: both;     visibility: hidden;    }   .clearfix {   /* IE6、7 专有 */     *zoom: 1;  } 欢度国庆手抄报内容

▷优点：没有增加标签，结构更简单
▷缺点：照顾低版本浏览器

2.4：父级添加双伪元素

 .clearfix:before,.clearfix:after {     content:"";    display:table;   }  .clearfix:after {     clear:both;  }  .clearfix {      *zoom:1;  }

▷优点：代码更简洁
▷缺点：照顾低版本浏览器

【叽叽歪歪】小案例

<!DOCTYPE html><html lang="en"><head>    <meta chart="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> * {  padding: 0; margin: 0; } .box {  width: 1214px; height: 457px; margin: 50px auto; } .box_1, .box_2, .box_3 {  wi有苦说不出的句子dth: 350px; height: 390px; float: left; margin-top: 30px; } .box_1 {  margin-left: 30px; } .box_2 {  margin-right: 50px; margin-left: 50px; box-shadow: 5px 5px 5px 10px rgba(204, 231, 236, .3); } ul {  list-style: none; } .box_1 ul li, .box_3 ul li {  width: 170px; height: 190px; float:花开成语 left; } .s_1, .s_3 {  margin-right: 5px; } .s_3, .s_4 {  margin-top: 5px; } </style></head>我这辈子有过你<body>    <div class="box">        <div class="box_1">            <ul>                <li class="s_1"><img src="image/left01.png" alt=""></li>                <li class="s_2"><img src="image/left02.png" alt=""></li>                <li class="s_3"><img src="image/left03.png" alt=""></li>                <li class="s_4"><img src="image/left04.png" alt=""></li>            </ul>        </div>        <div class="box_2">            <img src="image/center.png" alt="">        </div>        <div class="box_3">            <ul>                <li class="s_1"><img src="image/right01.png" alt=""></li>                <li class="s_2"><img src="image/right02.png" alt=""></li>                <li class="s_3"><img src="image/right03.png" alt=""></li>                <li class="s_4"><img src="image/right04.png" alt=""></li>            </ul>        </div>    </div></body></html>