CSS基础知识（常复习，常修正)

时间 2019-11-08

标签 css 基础知识复习修正栏目 CSS 繁體版

原文原文链接

####Part1 CSS简介css

CSS 层叠样式表：主要用于定义html内容在浏览器内的显示样式，如文字、大小、字体加粗等html

css注释 /注释语句/ html注释api

css样式由选择符和声明组成，而声明又由属性和值组成。当有多条声明时，中间用英文;隔开. 最后一条生命通常没有分号浏览器

代码：p{ font-size:14px; color: blue} 说明: p 选择符 /：声明 /color 属性 /blue 值ide

3种css样式优先级从高到低：内联式>嵌入式>外部式布局

内联式：<p style="color":red>文本</p>字体

嵌入式css: <head>标签内添加 <style type="text/css">css样式</style>url

外链式css:<head>/<body>标签内添加 <link href="base.css" rel="stylesheet" type="text/css"/>spa

!!!!注意： 1.css样式文件以有意义的英文字母命名； 2.rel="stylesheet" type="text/css"是固定写法不可修改 3.<link>标签位置通常写在<head>标签内设计

####Part2 CSS选择器 #####2.1 选择器简介基本选择器：元素（标签)选择器、id选择器、class选择器、子类选择器、父类选择器

标签选择器 { css样式; }

类选择器 .class { css样式代码; } 注意前缀.

id选择器：#id{ css样式; } 注意前缀#

类选择器和ID选择器的区别： 1.ID选择器只能在文档中使用一次; 2.能够用类选择器词列表方法为一个元素同时设置多个样式，而ID选择器不能够

子选择器：语法：.food>li{ css样式 ;} 子选择器用>符号用于选择制定标签元素的第一代子元素

包含(后代)选择器语法：.first span{ css样式; } 包含选择器即加入空格，用于制定标签元素下的全部后代元素

相邻选择器：选择下一个兄弟元素语法： p1+p2{ css样式; } 用+链接

群组选择器： div,p,span{css样式} 用,隔开

通用选择器：* {css样式} css清零 *{margin:0;padding:0}

#####2.2 选择符伪类选择符：伪类选择符容许给html不存在的标签（标签的某种状态）设置样式: 代码：a:hover{color:red;}这行代码就是为a标签鼠标滑过的状态设置字体颜色变红

注意：伪类标签并不兼容全部浏览器，不建议使用

分组选择符：当你想为html中多个标签元素设置同一个样式时，可使用分组选择符(,)

选择符的特色：继承继承规则不只容许css样式做用于某个html标签，并且应用于其后代

特殊性当咱们为同一个元素设置了不一样的css样式代码，浏览器会根据权值来判断使用那种css样式，标签权值=1，类的权值=10 id权值=100 继承的权值=0.1

层叠一个元素有多个权值同样的css样式，浏览器会根据这些样式的前后顺序来决定，处于最后面的css样式会被应用

重要性咱们在作网页代码的时，有些特殊的状况须要为某些样式设置具备最高权值，怎么办？这时候咱们可使用!important来解决。代码： p{color:red!important;} p{color:green;}

！！！注意：!important要写在分号的前面

#####2.3 font文字样式

font-family 字体类型（可同时设置多个值) font-size 字体大小 color 颜色（rgb转16进制:http://www.lvyestudy.com/tools/color_picker.aspx） font-weight 粗细 normal/lighter/bold/bolder font-style 斜体 normal italic oblique(有italic就用italic,无该属性就用oblique) text-decoration: none/ underline/ line-through 删除线

#####2.4 text段落样式 text-align: center/left/right text-indent: 2em（缩进2个字符） line-height: nnpx（当与height值相等时，能够控制文本垂直居中) text-transform: none/uppercase/lowercase/capitalize font-varient: none/small-caps(小型大写，基本用不到) letter-spacing: 字母间距 nnpx; word-sapcing: 单词间距 nnpx；

#####2.5 border边框样式

任何块级元素和行级元素均可以设置边框属性 border属性： border-width: npx; border-style: none/solid/dashed/dotted/dobule/hidden 3D边框样式：inset 内凹/ outset 外凸/ ridge 脊线/ groove槽线 border-color:颜色值

局部边框设置：border-top/right/bottom/left

#####2.6 background背景样式

背景色：background-color: 背景图：background-image:url("img地址"); background-repeat: no-repeat repeat-x repeat-y repeat; background-position: top/bottom left/center/right 或者像素值 background-acttachment:scroll(默认)/fixed

#####2.7 a标签超连接样式

a:link 未被访问 a:visited 访问后的样式 a:hover 鼠标通过显示 a:active 单击激活时的样式给a标签订义样式时，这4种伪类的顺序不能变！！

鼠标样式：cursor cursor属性值：default/pointer/move/....

#####2.8 image图片样式 width/height/border text-align 水平对齐/vertical-align 垂直对齐图文环绕 float（浮动）属性：left/right/margin

#####2.9 list 列表样式 ol type=1 /a /A /i /I ul type=disc实心圆/circle空心圆/square 实心正方形 list-style-type:none list-style-image:url("地址")

#####2.10 table表格样式单元格之间的间距：border-collapse:separate(默）/collapse 表格边框间距: npx (左右，上下) 表格标题:caption-side：top(默)/bottom

####Part3 盒子模型 #####3.1 元素分类在css中，html标签元素可分红三大类：块状元素、内联元素、内联块状元素

块状元素(display:block) 特色：一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

二、元素的高度、宽度、行高以及顶和底边距均可设置。

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

经常使用的block元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

内联元素(display:inline) 特色：一、和其余元素都在一行上；二、元素的高度、宽度及顶部和底部边距不可设置；三、元素的宽度就是它包含的文字或图片的宽度，不可改变。经常使用的inline元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状元素(display:inline-block) 特色：一、和其余元素都在一行上；二、元素的高度、宽度、行高以及顶和底边距均可设置。经常使用的内联块状元素有：<img>、<input>

#####3.2 盒子模型在CSS理论中，全部页面中的元素均可以看出是一个盒子，而且占据必定的页面空间

盒子内容到border距离：padding 盒子之间距离：margin 盒子上下左右：padding-top/riht/bottom/left 盒子的边框: border

一个元素的实际宽度（盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

注意：元素的width和height仅仅针对内容区而言

#####3.3 CSS布局模型

3种基本布局模型：Flow流动模型/ Float浮动模型/ Layer层模型

Flow模型(默认网页布局模型）特征： 1.块状元素都会在所处的包含元素内自上而下按照顺序垂直延伸分布，由于在默认状态下，块状元素的宽度都是100%

2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示

Float模型：能够设置块元素的水平对齐方式！！设置浮动后，未设置宽度的话，容器的大小随着内容而变化

特征：任何元素在默认状况下是不能浮动的，但能够用 CSS 定义为浮动，如 div、p、table、img等元素均可以被定义为浮动

层模型：层模型布局就像是ps中的图层编辑功能，每一个图层都可以精准定位操做。

#####3.4 定位机制：标准文档、浮动、绝对定位

经过使用position属性能够选择4种不一样的定位

静态定位static:默认状况下，不指定元素的position值，元素时静态定位

相对定位relative:相对原始位置偏移相对定位完成的过程是首先按static(float)方式生成一个元素(而且元素像层同样浮动了起来)，而后相对于之前的位置移动，移动的方向和幅度由left、right、top、bottom属性肯定，偏移前的位置保留不动。

绝对定位absolute和fixed:一个元素变成了绝对定位元素，这个元素就彻底脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其余元素上面，它是独立出来的。

absolute:相对文档绝对定位 fixed：相对于网页窗口固定定位，它不会随浏览器窗口的滚动条滚动而变化。

####Part4 CSS代码缩写和居中样式小技巧 #####4.1 代码简写盒子模型缩写：margin:10px//margin:10px 20px//

颜色值缩写：对于rgb的16进制格式，如果每两位的值同样，能够缩写一半

字体缩写： body{ font:italic 12px/15px bold "宋体" ,sans-serif}

注意：1.字体缩写至少要指定font-size和font-family属性 2.font-size 与 line-height 中间要加入“/”斜扛

90像素=1英寸

#####4.1 CSS居中样式设计小技巧水平居中：若是被设置元素为文本、图片等行内元素时，水平居中是经过给父元素设置 text-align:center 来实现的。

div 水平平居中 margin:0 auto;

不定宽度块状元素：

设置不定宽块状居中：

法一：加入 table 标签，给这个table设置 margin:0 auto; 法二：设置上一级父元素display: inline；法三：设置上一级父元素position:relative 和 left:-50%;

垂直居中:

父元素高度肯定的单行文本:height=line-height

父元素高度肯定的多行文本：

法一：使用插入 table (包括tbody、tr、td)标签，同时设置table的vertical-align：middle（默认如此)

法二：设置父元素display: table-cell,同时设置 vertical-aglin:middle

隐形改变display类型：

position:absolute 和float:left/right(只要出现任意一种状况，元素的display会自动变为 inline-block