CSS基础

概念

层叠样式表(cascading style sheet)

写法：

  1. 选择器{
  2.   属性名: 属性值;
  3. }

内联样式：

  1. <div style="width: 100px;"></div>

内部样式表：

  1. <head>
  2.   //type可填写,告诉浏览器是文本样式
  3.   <style type="text/css"></style>
  4. </head>

外部样式表：

  1. //外部引入css文件
  2. <head>
  3.   //rel表示引用链接与html文档的关系是样式表关系
  4.   //href表示引用路径
  5.   <link rel="stylesheet" type="text/css" href="./index.css" />
  6. </head>

优先级：

  1. //默认情况：
  2. 内联样式(少用) > 内部样式表(测试时用) > 外部样式表(常用)

加载过程

1.CSS基础 - 图1

浏览器加载页面的过程：

  1. 输入网址时请求网络资源，下载HTML,CSS,JS,图片等资源文件
  2. 下载HTML时开始语法解析，形成一个树形结构的DOM树
  3. 在引用外部样式表的时会异步新开一个下载CSS文件的线程
  4. 下载CSS文件以后会解析CSS语法，形成CSS规则树
  5. DOM树和CSS规则树合并构建了渲染树

选择器

id选择器：

  1. //id选择器的特性是唯一性
  2. #box{...}
  4. <div id="box"></div>

类选择器：

  1. //不同标签同一个类可以定义同一种样式,样式的统一性
  2. .box{...}
  4. <div class="box"></div>

标签选择器：

  1. //弊端: 对所有标签生效,适用于初始化标签
  2. div{...}
  4. <div></div>

通配符选择器：

  1. //适用于所有HTML标签
  2. *{...}

属性选择器：

  1. //使用标签上的某一个属性去判断
  2. //场景：input表单
  3. [type="text"]{...}
  5. <input type="text" />
  6. <input type="password" />

派生选择器(父子)：

  1. strong em{...}
  3. <strong><em>hello</em></strong>
  5. //浏览器对父子选择器的匹配规则：
  6. //顺序是从右往左 从里层到外层
  7. //因为非父子关系也可以越级匹配,如果从左到右会非常影响性能
  8. .nav header h3 span{...}
  9. <div class="nav">
  10.   <header><h3><span></span></h3></header>
  11. </div>

并列选择器：

  1. //情况1：标签接类 企业不用，适用初学者
  2. h1.title{...}
  3. <h1 class="title">hello</h1>
  5. //情况2：
  6. .box{...}
  7. .box1{ color: green }
  8. .box2{ color: orange }
  10. <div class="box box1"></div>
  11. <div class="box box2"></div>

分组选择器：

  1. h1,
  2. p {...}

权重

增加权重写法：

  1. //慎用
  2. div{ background-color: red !important; }

优先级：

  1. important > id选择器 > 类选择器 = 属性选择器 > 标签选择器 > 通配符选择器

权重值：

选择器 权重值
通配符 0
伪元素，标签 1
类，属性，伪类 10
id 100
内联样式 1000
!important 正无穷

边框

定义小三角形的写法：

  1. .box {
  2.   width: 0;
  3.   height: 0;
  4.   border: 100px solid transparent;
  5.   border-left-color: orange;
  6. }

效果：

1.CSS基础 - 图2

原理：

1.CSS基础 - 图3

盒子宽高为0，只设置单侧边框颜色，其余3侧的颜色为透明即可

单位

em在默认情况下1em = 16px，它相当于空格一个字符

文本

文本 属性名 属性值 描述
文本对齐 text-align left/right/center 左右,居中
垂直对齐 vertical-align top/middle/bottom 上中下
文字装饰 text-decoration overline/line-through/underline 上中下划线
文字缩进 text-indent 5px/2em 用于指定文本第一行的缩进
行高 line-height 22px 行之间的间距
文本阴影 text-shadow 水平阴影（2px）和垂直阴影（2px） 为文本添加阴影
字体样式 font-style normal/italic 正常，斜体

容器内多行文本居中的办法：

  1. 将容器的display设置为table
  2. 将容器内的文本的display设置成table-cell(单元格属性)
  3. 将容器内的文本vertical-align设置成middle

省略

省略三件套

  1. div{
  2.   white-space: nowrap; //不换行
  3.   overflow: hidden; //溢出隐藏
  4.   text-overflow: ellipsis; //隐藏部分省略号显示
  5. }

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
  1. /* 鼠标悬停链接 */
  2. a:hover {
  3.   color: #FF00FF;
  4. }
  6. //找指定元素
  7. span:last-children{
  8.   color: orange;
  9. }

伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容
  1. ::selection {
  2.   color: red; 
  3.   background: yellow;
  4. }
选择器 例子 例子描述
::after p::after 在每个<p>元素之后插入内容。
::before p::before 在每个 <p>元素之前插入内容。

布局

补充1：

  • 块级元素(block element)
  • 行内元素(inline element)
  • 行内块元素(inline-block element)
display布局 独占一行 宽高设置
block 是 是
inline 否 否
inline-block 否 是

补充2：

  • display:none不保留节点
  • visibility:hidden保留节点

盒子模型

box model，宽高所划分的区域，包含外边距，边框，内边距

注意：

默认情况下，内边距和边框是不占设定盒子的宽高的，如果想占盒子宽高，则需要定义box-sizing: border-box;，解开写法：box-sizing: content-box;

IE6,7兼容写法：

  • -moz-box-sizing: border-box;(火狐)，
  • -webkit-box-sizing: border-box;(chrome safari)，
  • -ms-box-sizing: border-box;，
  • -o-box-sizing: border-box;(opera)

塌陷

子元素盒子设置margin-top时同时导致父盒子一起塌陷下来，margin会存在高度塌陷问题

解决方案：

  1. 使其转为BFC元素解决
  2. 父盒子定义透明的边框border-top: 1px solid transparent;

定位

绝对定位中的两栏设计，左侧是固定宽度，右侧则自适应

  • 左侧：固定宽度
  • 右侧：绝对定位，margin-left

浮动

块级元素是无法识别浮动元素的位置，需要父级上清除浮动(只能块级元素)

  1. .clearfix:after {
  2.   content: '';
  3.   display: table;
  4.   clear: both;
  5. }

background

  1. background: url(xxx) no-repeat 宽 高;
  2. //图片居中
  3. background-position: center center; //or 50% 50% or 10px 10px 
  4. //图片缩放 如浏览器拉宽也不会变形
  5. background-size: cover; //cover占满整个盒子,多余部分裁切,不影响图片比例 contain相反
  6. background-attachment: fixed; //固定背景图片,滚动条无法滚动图片

BFC

BFC(block formatting contexts)块级格式化上下文的特性是css2.1提出来的概念

布局定位方案 描述
普通流(normal flow) 至上而下，内联元素水平排列直到占满换行
浮动流(flow) 脱离普通流，浮动元素左右偏移
绝对定位(absolute positioning) 脱离文档流之上的层，不影响兄弟元素布局，由坐标绝对定位
BFC 独立的容器，不会对外界产生影响，普通流范畴，

如何让元素成为BFC元素？

如<body>它本身就是一个BFC元素，定义以下样式属性会使元素具备BFC特性

属性 属性值
float left/right
position absolute/fixed
display inline-block/table-cell
flex 1/...
overflow hidden/auto/scroll

BFC元素会导致什么作用？

它会导致嵌套子盒子设置margin时存在合并的问题，解决办法将其父盒子转为BFC元素

BFC解决了什么问题？

  1. margin合并的问题
  2. 浮动元素覆盖的问题
  3. 浮动流造成父级元素高度塌陷的问题
  4. margin塌陷的问题

规范

CSS的书写顺序：

  1. div {
  2.   //显示属性
  3.   display, position, float, clear,
  4.   //自身属性
  5.   width, height, margin, padding, border, background
  6.   //文本属性
  7.   color, font, text-align, vertical-align, whitespace
  8.   //其他
  9. }

命名

选择器符合单词用中横线

选择器 符号
复合单词 -中横线
JS钩子ID _下划线，如J_data