第一次用markdown工具做笔记, 如有不妥, 请各位看官多多包涵
文章目录
- CSS简介
- CSS权重叠加问题
- CSS盒子模型
- CSS圆角边框
- CSS盒子阴影
- CSS浮动
- CSS定位
- 总结
CSS简介--网页的美容师
CSS是层叠样式表(Cascading Style Sheets)的简称，有时我们也会称之为CSS样式表或级联样式表。它是一种用来表现HTML或XML等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS让我们的网页更加丰富多彩,布局更加灵活自如。
简单理解:CSS可以美化HTML,让HTML更漂亮,让页面布局更简单。
CSS权重叠加问题
如果是复合选择器, 则会有权重叠加, 需要计算权重
选择器 选择器权重
继承 或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器, 伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important 重要的 ∞无穷大
注意：继承的权重是0
CSS盒子模型
组成：
border边框 :
属性: border-width(粗细) || border-style(样式) || border-color(颜色)
简写: border: 1px solid red; //没有顺序
border-collapse: collapse; //表格细线边框
边框会影响盒子实际大小
content内容
padding内边距
属性: padding-left(左内边距) padding-right(右内边距)
padding-top(上内边距) padding-bottom(下内边距)
简写：padding: a, b, c, d;
1个值：上下左右--a 2个值：上下--a 左右--b
3个值：上--a 左右--b 下--c 4个值：上--a 右--b 下--c 左--d
内边距也会影响盒子实际大小。如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小
margin外边距
margin-left(左外边距) margin-right(右外边距)
margin-top(上外边距) margin-bottom(下外边距)
简写与padding一样
外边距可以让 块级盒子 水平居中, 但必须满足两个条件:
1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto
常见的三种写法:
1.margin-left: auto; margin-right: auto
2.margin: auto;
3.margin: 0 auto;
行内元素 或者 行内块元素 水平居中给其父元素添加 text-align: center; 即可
相邻块元素垂直外边距的合并：
当上下相邻的两个块元素(兄弟关系)相遇时, 如果上面的元素有下外边距, 下面的元素有上外边距, 则它们之间的垂直间距不是两者之和, 而是去两个值中的较大值. 该现象被称为 相邻块元素垂直外边距的合并.
解决方案：尽量只给一个盒子添加margin值.
嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系(父子关系)的元素, 父元素有上外边距的同时子元素也有上外边距, 则此时父元素会塌陷较大的外边距值.
解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加 overflow: hidden;
还有其他方法, 比如浮动、固定、绝对定位的盒子不会有塌陷问题.
CSS圆角边框
border-radius: length;
圆形设置: border-radius: 50%; //设置为width和height的一半
圆角矩形：设置为height的一半
简写: 可以跟四个值, 分别代表左上角, 右下角, 右下角, 左上角
分开写: border-top-left-radius border-top-right-radius,
border-bottom-left-radius, border-bottom-right-radius
CSS盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必须, 水平阴影的位置, 允许负值
v-shadow：必须, 垂直阴影的位置, 允许负值
blur：可选, 模糊距离
spread：可选, 阴影尺寸
color：可选, 阴影颜色
inset：可选, 将外部阴影改为内部阴影(默认外阴影outset,但不可写)
注意: 盒子阴影不占用空间, 不会影响其他盒子排列.
CSS浮动
传统网页布局的三种方式: 普通流(标准流)、浮动、定位
标准流(普通流/文档流)：
1.块级元素会独占一行, 从上向下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序, 从左到右顺序排列, 碰到父元素边缘则自动换行
常用元素：span、a、i、em、...
网页布局第一准则：多个块级元素纵向排列找标准流, 多个块级元素横向排列找浮动
语法:
选择器 { float: 属性值; }
属性值：none(不浮动, 默认值) left(左浮动) right(右浮动)
特性：
1. 浮动元素会脱离标准流(脱标), 浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
清除浮动
本质是清除浮动元素造成的影响. 如果父盒子本身有高度, 则不需要清除浮动. 清除浮动之后, 父级就会根据浮动的子盒子自动检测高度. 父级有了高度, 就不会影响下面的标准流了.
语法：
选择器 { clear: 属性值; }
属性值：left(不允许左侧有浮动, 清除左侧浮动的影响)
right(不允许右侧有浮动, 清除右侧浮动的影响)
both(同时清除左右两侧浮动的影响)
清除浮动的策略是: 闭合浮动
方法:
1.额外标签法(隔墙法)
是W3C推荐的做法, 在浮动元素末尾添加一个空的标签(必须是块级元素)
优点: 通俗易懂, 书写方便
缺点: 添加许多无意义的标签, 结构化较差
2.父级添加overflow属性
属性值: hidden、auto、scroll
优点: 代码简洁
缺点: 无法显示溢出的部分
3.父级添加after伪元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点: 没有增加标签, 结构更简单
缺点: 照顾低版本浏览器
4.父级添加双伪元素
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点: 代码更简洁
缺点: 照顾低版本浏览器
CSS定位
组成：定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置
定位模式position:
static: 静态定位
默认定位方式, 无定位的意思. 按照标准流特性摆放位置, 没有边偏移
relative: 相对定位
特点: 1.是相对于自己原来的位置移动的
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它
absolute: 绝对定位
特点: 1.如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位
2.如果祖先元素有定位(相对、绝对、固定定位), 则以最近一级的有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置(脱标)
fixed: 固定定位
特点: 1.以浏览器的可视窗口为参照点移动元素, 跟父元素没有任何关系,不随滚动条滚动
2.固定位置不占有原先的位置(脱标)
固定定位小技巧: 固定在版心右侧位置
1.让固定定位的盒子left: 50%. 走到浏览器可视区(也可以看作版心)一半位置.
2.让固定定位的盒子margin-left: 版心宽度的一半距离.多走版心宽度一半位置
sticky: 粘性定位
特点: 1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位占有原先位置(相对定位特点)
3. 必须添加top、left、right、bottom其中一个才有效
4. 跟页面滚动搭配使用. 兼容性较差, IE不支持
边偏移:
top: 顶端偏移量, 定义元素相对于父元素上边线的距离
bottom: 底部偏移量, 定义元素相对于父元素下边线的距离
left: 左侧偏移量, 定义元素相对于父元素左边线的距离
right: 右侧偏移量, 定义元素相对于父元素右边线的距离
定位的叠放顺序:
z-index控制盒子的前后次序(z轴)
语法:
选择器 { z-index: 1; }
1.数值可以是正整数、负整数或0, 默认是auto, 数值越大, 盒子越靠上
2.如果属性值相同, 则按照书写顺序, 后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性
定位特殊特性:
绝对定位和固定定位也和浮动类似
1.行内元素添加绝对或者固定定位, 可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位, 如果不给宽度或者高度, 默认大小是内容的大小
注意：
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题
绝对定位(固定定位)会完全压住盒子
浮动元素不同, 只会压住它下面标准流的盒子, 但是不会压住下面标准流盒子里的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字, 因为浮动产生的目的最初是为了做文字环绕效果, 文字会围绕浮动元素
绝对定位的盒子居中:
1. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置
2. margin-left: -100px; 让盒子向左移动自身宽度的一半
元素的显示与隐藏
1. display显示隐藏
none: 隐藏对象
block: 除了转换成块级元素外, 还有显示元素的意思
display隐藏元素后, 不再占有原来的位置
2. visibility显示隐藏
inherit: 继承上一个父对象的可见性
visible: 对象可视
hidden: 对象隐藏
collapse: 主要用来隐藏表格的行或列. 隐藏的行或列能够被其他内容使用. 对于表格外的其他对象, 其作用等同与hidden
visibility隐藏元素后, 继续占有原来的位置
如果隐藏元素想要原来位置, 就用visibility: hidden;
如果隐藏元素不想要原来位置, 就用display: none;
3. overflow溢出显示隐藏
visible: 不剪切内容也不添加滚动条
auto: 超出自动显示滚动条, 不超出不显示滚动条
hidden: 不显示超过对象尺寸的内容, 超出的部分隐藏掉
scroll: 不管超出内容与否, 总是显示滚动条
总结
- 第一次在电脑上用markdown语法写笔记着实不怎么习惯
- 青训营这段时间才发现自己所学的仅仅只是冰山一角
- 纸上得来终觉浅，绝知此事要躬行！！
