CSS笔记

date: 2021.02.03; modification:2021.02.03

0.1 标签类型(按照显示模式分)
0.2 样式分类
0.3 css选择器
0.4 css优先级
0.5 字体与文字样式
0.6 盒模型
0.7 边框
0.8 margin
0.9 背景
0.10 流式布局(float)
0.11 BFC
0.12 tips
0.13 居中
0.14 input样式
0.15 颜色收集

0.1 标签类型(按照显示模式分)

* 块元素(block)(可以设置宽高): h1..h6, p, div, ul, ol, li
    * 每个块级元素都从新的一行开始, 并且其后的元素也另起一行.
    * 元素的高度, 宽度, 行高以及顶和底边距都可设置.
    * 元素宽度在不设置的情况下, 是它本身父容器的100%(和父元素的宽度一致), 除非设定一个宽度.
* 行内元素(inline): strong, b, em, i, del, s, ins, u, a, span
    * 和其他元素都在一行上;
    * 元素的高度, 宽度及顶部和底部margin不可设置;
    * 元素的宽度就是它包含的文字或图片的宽度, 不可改变.
* inline-block: img
    * 和其他元素都在一行上;
    * 元素的高度, 宽度, 行高以及顶和底边距都可设置.

0.2 样式分类

* 内联: <div style="">hello</div>
* 页内: <head><style>div {}</style></head>
* css : <link rel="stylesheet" href="/style.css" type="text/css" />

0.3 css选择器

* 通配符: * {} 选择所有.
* 标签: p {}   div {}
* ID: #myid {}
* 类: .mytype {}
* 标签指定式选择器: li.news
* 并集选择器: h1, h2, p
* 后代选择器: .news a {}
* 子元素选择器: p > strong
* 属性选择器(中括号):   [class] {}          // 所有拥有class属性的元素
                        h1[class] {}        // 拥有class属性的h1
                        [id="4"]            // id为4的元素
                        span[class~="demo"] // class中包含demo的span
                        [att^="val"]        // att属性以"val"开头的元素
                        [att$="val"]        // att属性以"val"结尾的元素
                        [att*="val"]        // att属性模糊匹配"val"

* 伪类选择器:   :link               // :hover  :visited  :active  :focus      LoVe HAte原则
                :first-child        // 该选择器是伪类, 所以需要作用在子级而非父级上.
* 伪元素:       ::first-line
                ::first-letter
                ::before       ::after          {content: ...}

0.4 css优先级

第一原则:

内联 > [嵌入(<head/style>标签) / 外部引入] > 继承 > 默认     // 超级连接的颜色除外

第二原则:

!important > ID > 类(伪类) > 标签 > 继承 > 默认

0.5 字体与文字样式

font-size: 16px, 2em, xx-small, medium, xx-large
font-family: tahoma(mac), arial(英文), sans-serif(默认非衬线)
font-weight: normal / bold / bolder / lighter / 或 100~900(100的整数倍, 其中400为normal, 700为bold)
font-style: italic,
font: style weight size/line-height family
letter-spacing: 5px;
word-spacing: 5px;
line-height: 30px 或 1.5px // 可以设置 line-height 与 div高度一致, 实现上下居中.
text-align: center / right; // center实现左右居中
text-decoration: none / underline / overline / line-through // 可以多值.
text-indent: em
white-space: normal / pre / nowrap
user-select: none // 禁止用户选择.

0.6 盒模型

盒模型组成: 从里到外:

content(内容)
padding
border
margin
width, background-color的范围为border之内(含border)的部分.

0.7 边框

border合写: border: 1px solid green
border各参数的多边各自设置的合写: 2参数: 上下+左右; 3参数: 上+左右+下; 4参数: 上+右+下+左
表格: border-collapse: collapse;
表单的边框通常设为0: border: none;
轮廓(链接有虚线, 文本框聚焦有蓝色边框): outline-style: none

0.8 margin

margin合并: 当上下两个块元素相邻, 并且都设置了margin, 则只保留大的设置.
行内元素不要设置上下的margin, padding. 因为会被浏览器忽略.
块元素左右居中: margin: 0 auto; // 上下margin为0, 左右margin自动计算, 即为居中.

0.9 背景

background-image:url(‘bgimage.gif’): background-repeat:no-repeat; background-attachment:fixed; background-position:center; background-position: left/center/right, top/center/bottom. or x%, y% or xpos, ypos or inherit background-repeat: repeat(默认) / repeat-x / repeat-y / no-repeat / inherit background-size: 200px 400px(将图片缩放到指定大小,失去比例) 50% 50%(图片缩放到占用容器的百分比,失去比例) cover(成比例缩放到完全覆盖住容器,但图片不一定完全显示) contain(成比例缩放到图片完全显示在容器中,其中一个轴向上充满容器, 另一轴向可能会闲着一块)

0.10 流式布局(float)

float属性: none(默认) / left / right
浮动脱离标准流, 不占位置, 但会影响标准流.
float的div, 会盖住不float的div, 但是不会盖住其文字.

0.11 BFC

具有 BFC 特性的元素可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素, 并且 BFC 具有普通容器所没有的一些特性. (通俗一点来讲, 可以把 BFC 理解为一个封闭的大箱子, 箱子内部的元素无论如何翻江倒海, 都不会影响到外部. )

BFC触发条件:

常用BFC触发条件:

根元素或包含根元素的元素
float属性不为none.
position 属性为 absolute 或 fixed
display
- inline-block: 行内块元素
- table-cell: 表格单元格(HTML表格单元格默认为该值)
- table-caption: 表格标题(HTML表格标题默认为该值)
- flex 或 inline-flex: 弹性元素
overflow 值不为 visible 的块元素

其他BFC触发条件: * display: * flow-root * 匿名表格单元格元素(元素的 display为 table, table-row, table-row-group, table-header-group, table-footer-group(分别是HTML table, row, tbody, thead, tfoot的默认属性)或 inline-table) * grid 或 inline-grid 元素的直接子元素: 网格元素 * contain 值为 layout, content或 strict 的元素 * 多列容器(元素的 column-count 或 column-width 不为 auto, 包括 column-count 为 1) * column-span 为 all 的元素始终会创建一个新的BFC, 即使该元素没有包裹在一个多列容器中(标准变更, Chrome bug).

BFC特性:

BFC就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素. 反之也如此.
内部的Box会在垂直方向, 一个接一个地放置.
同一个 BFC 下外边距会发生折叠: 如果需要避免折叠, 可以放到不同的BFC容器中.
BFC 可以包裹浮动的元素(清除浮动)
BFC的区域不会与float box重叠, 不会被浮动元素覆盖: 可用于2/3列式布局时, 自动调节主内容区域的宽度.
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化, 否则相反). 即使存在浮动也是如此.

利用BFC包裹浮动(无副作用方案):

.clearfix::before, .clearfix::after {
    content: " "; /* 空格为了兼容老式opera的bug */
    display: table; /* BFC, 前后有换行 */
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容ie6,7 */
}

0.12 tips

网页常用初始css配置:
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
- table{border-collapse:collapse;border-spacing:0;}
去掉列表样式:
- ul, li {list-style: none}

0.13 居中

一种div居中方法:

position    : absolute;
left        : 50%;
top         : 50%;
width       : 200px;
height      : 100px;
margin-left : -100px;
margin-top  : -50px;

另一种div居中方法:

position : absolute;
top      : 0;
left     : 0;
right    : 0;
bottom   : 0;
margin   : auto;

0.14 input样式

input输入框

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 13px 14px;
    width: 620px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}
input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

0.15 颜色收集

#189FFE 蓝Button

#008CEE 蓝Button2

#008CEE 蓝Header

#17C295 绿

#00BCD4 蓝