1、块级元素和行内元素的区别
2、块级、行内元素有哪些？
3、选择器优先级
4、水平垂直居中——通过选择器
5、行内元素如何设置宽高？
6、解决外边距合并——边距塌陷
7、iframe标签
8、CSS引入方式
9、布局：display、float、position、弹性(flex)
10、页面架构
11、三列布局：两边定宽，中间自适应
12、CSS盒模型
13、元素不可见
14、overflow：hidden
15、a标签伪类设置顺序
16、Less：在css基础上加入了程序式语言的特性
一、块级元素和行内元素的区别
1.独占一行 可与其他元素共享一行
2.可包含块级元素和行内元素 只能包含文本或其它行内元素
3.可直接设置宽高 不能直接设置宽高
二、块级、行内元素有哪些？
三、选择器优先级
行内、id、class、标签、通配符*、继承
四、将块级或者行内元素水平垂直居中——通过选择器
1、块级水平 居中
margin:auto;
块级元素——内容/子在父中 水平垂直居中
1>内容在块级中对齐
父元素display:flex;
justify-content:center; 主轴方向对齐方式
align-items:center; 侧轴方向对齐方式
2>没内容时，子块级在父块级中对齐
父元素display:flex;
子元素margin:auto;
3\4>有内容时不影响居中对齐，可再用第一种方法把内容水平垂直居中
父元素：position:relative;
子元素：position:absolute;
left,top:50%; //父元素的一半，此时子的左上角在父的中心
margin-left,margin-top:-(width/2) //计算，-：再向左上偏移子元素宽高的一半
子元素：position:absolute;
top,bottom,left,right:0px;
margin:auto;
2、行内(在块级中)水平垂直居中
给块级设置：text-align:center; //水平
line-height:height; //垂直
例子：<style>
div{
width: 500px;
height: 500px;
border:1px solid red;
margin:50px auto;
text-align: center;
line-height: 500px;
}
span{
border:1px solid blue;
}
</style>
<div>
<span>hello</span>
</div>
--------------分割线-------------------------------------------------------------
文字相对图片、输入框垂直居中
vertical-align:middle;
设置元素的垂直对齐方式，放在父元素的中部
line-height：
五、行内元素如何设置宽高？
1、display：block或inline-block
2、float：left，right
3、position：absolute，fixed
六、解决外边距合并——边距塌陷
1>父子关系——让子不在父左上角，阻止外边框和body边框合并，不希望父元素下去
1.父元素加border(一个分隔)
2.原本设置给子元素的margin->设置给父元素的padding
会影响父元素盒子的高度(默认标准盒子)——改变父元素的高/设成怪异盒子
//不在同一文档流里了
3.给其中一个设display: inline-block;float；绝对定位
6.给父元素添加overflow: hidden;
当父元素中所有子元素都飘起来后，父元素里无子元素，高度默认是0
不希望高度默认是0，设置后——父元素高度默认被浮动的子元素撑起
2>兄弟关系
1.将本该设给两个元素的margin设给一个元素
2.两个都设置：两个数都是整数或都是负数，取绝对值较大的一个
两个数一正一负，直接相加
七、iframe标签
定义：iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器
缺点：阻塞主页面的onload事件
搜索引擎无法解读这种页面，不利于SEO
和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能
八、CSS引入方式
九、布局：display、float、position、弹性(flex)
脱离文档流：不占据空间
层级关系：z-index:-1 < 普通元素 < float < position < z-index:1，后写的高于先写的
布局规则：先行级布局，后列级布局，从上到下，从左到右
1、display：none——后两者不起效果！
inline:块级元素->行内元素
block：行内元素->块级元素
inline-block：兼具行内和块级特性的元素(可在一行中显示，可设置宽高)
2、浮动float：none 清除浮动：clear：both
left left
right right
停止浮动——遇到父元素边框/其他浮动元素
浮动元素不遮挡文字和行内元素
浮动后会生成块级框
1)块级浮动后：可在一行中显示，宽度由内容撑起
2)行内浮动后，可设置宽高
3、定位布局position
absolute和fixed脱离文档流
absolute：相对于最近的非static定位的父元素左上角定位
如果父元素设置了static，会一直向上追溯到body左上角定位
relative：相对自身原来位置
static静态定位(默认)：上下左右、z-index属性无效
fixed固定定位：相对于浏览器窗口定位，滚动时位置不变
sticky粘滞定位：没到定位地点——相对定位
到定位地点——固定定位
z-index:number值，改变元素的叠加顺序，大覆盖小
（设置给两个使用了absolute定位的元素）
https://blog.csdn.net/weixin_40672882/article/details/81183321?
4、弹性(flex)布局：项目弹性布局，容器本身定位依然遵循常规文档流
display:flex——显示为块级元素，子元素的float、vertical-align失效，但position依然生效
容器：添加弹性布局的父元素
作用于父容器：flex-direction：决定主轴方向
row(默认)、row-reverse、column、column-reverse
flex-wrap：一条轴线排不下，换行
nowrap(默认)：每个项目会被挤压宽度
wrap：换行，第一行在容器最上方
wrap-reverse：换行，第一行在容器最下方
justify-content：项目在主轴上的对齐方式
flex-start(默认)：项目位于主轴起点
flex-end：项目位于主轴终点
center：居中
space-between：两边占满，中间间隔相等
space-around：项目两侧间隔相等，中间间隔比左右大一倍
align-items：项目在交叉轴上的对齐方式
项目：容器内的每一个子元素
作用于子项目：flex-basis：设置项目宽度，比width优先级更高
非auto：以flex-basis为准
auto：width
大：只有basis，basis大，元素宽度会随内容增加而变大
小：width大，内容大到width后 多余的会溢出
https://blog.csdn.net/xiaojinguniang/article/details/82915037?
vertical-align：行内元素垂直对齐
top
bottom
middle
十、页面架构
十一、三列布局：两边定宽，中间自适应
1、float——需要计算
容器包裹左、右、中
中间没法有空位——整个一行都被中间栏占满了——absolute定位也是
.left{
width:200px;
height: 100px;
background-color: #DC698A;
float:left;
}
.middle{
/*中间栏实际宽度100%,宽度不要设置*/
height: 100px;
background-color: #8CB08B;
margin:0 200px;
}
.right{
width: 200px;
height: 100px;
background-color: #3EACDD;
float: right;
}
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
圣杯布局——容器的左右内边距和左右列的相对定位
中间部分在文档流前面 优先渲染
中间内容的遮挡问题解决方法不一样
容器包起来，中、左、右——高度都设置
三列都左浮，容器、中宽度100%
容器：padding:0 200px
左：margin-left:-100%
右：margin-left:-x
——位置好了，但中间内容会被左右的盒子压住
——中间自适应
容器{padding:0 200px}——都到了中间，内容是在中间
给左右添加相对定位
双飞翼布局(改良)——子主列的左右外边距
来源于淘宝
多了一个div，但不用相对定位了
经典双飞翼布局
div中包了一个中
左
右
给小中设置margin值
十二、CSS盒模型
控制元素与元素之间，或元素和内容之间的位置关系
组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)
在标准模式下，一个块的总宽度=内容的width+padding(左右)+border(左右)+margin(左右)
在怪异模式下，一个块的总宽度=内容的width+margin(左右)，(width包含了padding(左右)和border(左右)的值）
十三、元素不可见
占据空间：opacity:0
visibility:hidden visible 子元素会继承
不占据空间：display:none
十四、overflow：hidden
溢出隐藏：超出部分隐藏，不占位
清除浮动
解决外边距塌陷
visible(默认)：多余显示在元素框外
hidden：多余不显示
scroll：多少都有滚动条(少了不能滚动)
auto：字多——滚动条
十五、a标签伪类设置顺序
李伟喝啊
link：默认样式
visited：访问过
hover：悬停
active：按下
十六、Less：在css基础上加入了程序式语言的特性
动态样式语言，对css赋予了动态语言的特性，如变量、继承、运算、函数
既可以在客户端，也可以在服务器端运行
一门 CSS 预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
可以运行在 Node、浏览器和 Rhino 平台上
Less官网：http://lesscss.org/
Less中文网：（结合以下两个网站看）
http://lesscss.cn/（推荐看这个网站，但翻译不完整）
http://less.bootcss.com/（翻译比较完整，但版本过低）
less转css
cnpm install -g less
lessc main.less main.css
2、html中使用less
<link rel="stylesheet/less" type="text/css" href="./styles/index.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
或者
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.11.1/less.js"></script>
可以自定义变量，变量不能以数字开头，不能包含特殊字符，区分大小写
支持代码块{}的嵌套
缩进语法
scss语法(块语法)
SASS
扩展了 CSS3语法，增加了混入、选择器、变量等特性
本身语法不太容易让浏览器识别，因为不是标准的CSS格式——编译成css被浏览器识别
scss中的变量以$开头，用：赋值
扫一扫
4991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
