关键词：
一.圆角边框
语法
border-radius:length;使用
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius
和 border-bottom-left-radius - 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.
二.盒子阴影
用法
box-shadow: h-shadow v-shadow blur spread color inset;注意点
- 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列。
三.文字阴影（了解）
text-shadow: h-shadow v-shadow blur color;
四.浮动
传统网页的布局的方式
- 普通流（标准流）：标签按照规定好默认方式排列.
- 浮动
- 定位
为什么需要浮动
标准流无法实现块级元素横向排列语法
选择器 float: 属性值;特性
- 脱标（脱离标准流）：浮动的盒子不再保留原先的位置
- 一行内显示且顶端对齐
- 浮动元素会具有行内块元素特性
浮动的注意点
- 浮动和标准流的父盒子搭配
- 一个元素浮动了，理论上其余的兄弟元素也要浮动。
- 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
为什么要清除浮动（影响）
- 本质上：浮动元素脱标了，撑不起标准流的父盒子
- 影响：父元素盒子撑不起来，后面的标准流会顶上来
- 父盒子的高度为0，影响后面的标准流排版
6.清除浮动4种方法
- 本质：清除浮动元素造成的影响
选择器clear:属性值;
- 方法
①额外标签法（隔墙法）
定义：额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
②父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。 子不教,父之过,注意是给父元素添加代码 优点：代码简洁 缺点：无法显示溢出的部分③父级添加after伪元素
:after 方式是额外标签法的升级版。也是给父元素添加.clearfix:after
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
.clearfix /* IE6、7 专有 */
*zoom: 1;
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
④ 父级添加双伪元素
也是给给父元素添加.clearfix:before,.clearfix:after
content:"";
display:table;
.clearfix:after
clear:both;
.clearfix
*zoom:1;
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
零基础学前端开发技术之第七章浮动塌陷(代码片段)
知识点：1.浮动塌陷的概念2.浮动塌陷的解决1：浮动塌陷的概念<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>浮动塌陷的出现</title> <!--第2步：设计CSS样式;div: 查看详情
小5聊前端基础知识之浮动块如何垂直居中并排显示(代码片段)
运用场景描述网站顶部有固定200px高度的行，左边显示图标右边显示导航菜单，如何把图标和菜单都居中显示1、图标和菜单都浮动的效果<divstyle="width:500px;height:100px;background:#eee;margin-bottom:49px;"><divstyle=&#... 查看详情
web前端-css基础与应用(代码片段)
Web前端-CSS基础Web前端-CSSCSS历史CSS特点简介丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS工作原理CSS版本区别CSS的基本语法CSS为HTML网页添加样式的三种方法CSS选择器元素/标签选择器id选择器class选择器群组选择器包... 查看详情
必备前端基础知识-第二节3：css盒模型和浮动(代码片段)
文章目录一：盒模型（1）border（2）padding（3）margin二：flex布局一：盒模型盒模型：在HTML中，每个标签（或元素）相当于是一个盒子，这个盒子由以下四个部分构成边框border... 查看详情
前端基础学习浮动与定位(代码片段)
浮动浮动浮动的基本概念浮动用来实现并排浮动的最本质功能：用来实现并排浮动使用要点：要浮动，并排的盒子都要设置浮动；盒子要有足够的宽度，否则盒子会掉下去；浮动的顺序贴靠特性子盒子会按... 查看详情
前端基础学习浮动与定位(代码片段)
浮动浮动浮动的基本概念浮动用来实现并排浮动的最本质功能：用来实现并排浮动使用要点：要浮动，并排的盒子都要设置浮动；盒子要有足够的宽度，否则盒子会掉下去；浮动的顺序贴靠特性子盒子会按... 查看详情
前端学习css基础(代码片段)
目录引言一、初识CSSCSS的作用CSS的注释CSS样式表二、CSS选择器CSS基础选择器三、CSS样式font字体样式CSS外观属性四、标签显示模式标签显示模式转换display五、CSS三大特性CSS层叠性CSS继承性CSS优先级六、⭐盒子模型盒子模型简介盒... 查看详情
浮动布局，以及如何清除浮动(代码片段)
...客园主页-冰山一树SankeyCSDN主页：CSDN主页-冰山一树Sankey前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也... 查看详情
零基础学前端之定位(代码片段)
1、定位把元素根据我们需要放在指定的位置，即定位。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以︰浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是... 查看详情
零基础学前端之定位(代码片段)
1、定位把元素根据我们需要放在指定的位置，即定位。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以︰浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是... 查看详情
前端基础(代码片段)
目录11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.盒子模型的属性有... 查看详情
前端基础只是学习(代码片段)
目录第十一章前端开发11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.... 查看详情
[web前端]017css浮动(代码片段)
1.文档流指盒子按照html标签编写的顺序依次从上到下，从左到右排列块元素占一行行内元素在一行之内从左到右排列先写的先排列后写的排在后面每个盒子都占据自己的位置2.浮动的特性浮动元素有左浮动(float:left)和右浮动(float:... 查看详情
前端之display总结与浮动(代码片段)
前端之浮动布局、清浮动display总结<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>display总结</title><styletype="text/css">/*1.同行显示，就相当于纯文本，当一行显示不下，那么显示不下的（字）就会自动换行... 查看详情
web前端之浮动以及简单布局(代码片段)
目录一、浮动的简介二、浮动的特点浮动元素会完全脱离文档流，不再占据文档流中的位置设置浮动以后，元素会向父元素的左侧或右侧移动浮动元素默认不会从父元素中移出4、浮动元素向左或向右移动时，不会超... 查看详情
css基础知识四浮动清除浮动(代码片段)
浮动传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置，CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位标准流（普通流/文档流）所谓的标准流:... 查看详情
前端技术——3——浮动与定位(代码片段)
浮动与定位：float，position块级标签：<div><p><h1-6><ul><ol><dl>内联标签：<a><img><input><span><select><textarea>正常文档流 查看详情
前端面试css—浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？(代码片段)
浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一... 查看详情