CSS笔记

date: 2021.02.03; modification:2021.02.03

目录:

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 字体与文字样式

0.6 盒模型

盒模型组成: 从里到外:

0.7 边框

0.8 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)

0.11 BFC

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

BFC触发条件:

常用BFC触发条件:

其他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包裹浮动(无副作用方案):

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

0.12 tips

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 蓝