/*css基础*/
HBuilder快捷键,
li*3 按tab快速生成
div>ul>li*5 按tab快速生成
div+div 按tab生成连个div
ul>li{我要自卸王$}*5 按tap键
#ee 颜色
重要:重置html默认样式很重要,有些好的reset.css,直接引入即可
css中以-moz,-ms,-webkit,-o开头的样式的含义
-moz代表baifirefox浏览器私有属性；
-ms代表IE浏览器私有属性；
-webkit代表chrome、safari私有属性；
-o代表Opera私有属性。
html标签是可以继承css属性的
1.选择器(选择符) 别的选择器都可以用基本选择器组合成
1.元素(基本)选择器:标签选择器,通用选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器
标签选择器
标签名{}
id选择器
#id名{}
类选择器
.类名{}
通配符选择器
*{} /*选择所有元素 一般用来清除内外边距，便于统一管理和设置*/
eg:
*{
margin: 0px;
padding: 0px;
}
2.关系选择器:包含选择器(E F),子选择器(E>F),相邻选择器(E+F),兄弟选择器(E~F)
包含(后代选择器,嵌套选择器)选择器(E F):选择所有被E元素包含的F元素(就是选择E里面的所有F元素)
eg:ul li{background-color: red;}
子选择器(E>F):选择元素E下的子元素F 只能选择子元素,不能选择到孙子元素
eg:ul > li{background-color: red;}
相邻选择器(E+F):选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
相邻选择器和兄弟选择器的区别:相邻选择器只能选择一个紧紧相邻的同级别的元素,而兄弟选择器可以选择多个同级别的选择器
eg:li+li{background-color: red;}
兄弟选择器(E~F):选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
eg:li~li{background-color: red;}
3.属性选择器:
规定:att是css的属性,val是属性值
种类:
E[att]:选择具有att属性的E元素。
E[att='val']:选择具有att属性且属性值只等于val的E元素,注意这样的不能选中 class="a b"，这能选中class="a"这样的
E[att~='val']:选择具有att属性且属性值为一用空格分隔的字词列表 eg:能选中这样的class="a b"
E[att^='val']:选择具有att属性且属性值为以val开头的字符串的E元素。
eg:<div class='abc'>abc</div>
<div class='ac'>ac</div>
div[class^='a']{background-color: red;}选中字符串a开头的div
E[att$='val']:选择具有att属性且属性值为以val结尾的字符串的E元素
eg:<style>
div[class$="c"] { /*选择以c结尾的div标签*/
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
E[att*='val']:选择具有att属性且属性值为包含val的字符串的E元素。
eg:<style>
div[class*="b"] {/*选择class属性值里面包含b字符的div标签*/
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
E[att|='val']:如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。
eg:<style>
div[class|="a"] {
border: 2px solid #000;
}
</style>
<div class="a">0</div>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>
4.常用选择器:并集(分组选择器)选择器,交集选择器
并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用','隔开,除了通配符选择器
eg:ul,p{background-color: red;}
交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器 E和F之间没有任何符号和空格
eg:.txt.ext{color: red;} /*选择class="txt ext"的标签*/
5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。
伪类:元素不同状态表现不同样式 选择器使用":" 如:链接元素访问前和访问后是不同的样式
伪对象(伪元素):文档结构中没有的元素 选择器使用"::"
1.用于超链接的四个伪类选择器: E一般是a标签 E:link,E:visited,E:hover,E:active
超链接状态顺序 必须按顺序写：a:link {} a:visited {} a:hover {} a:active {}
注意:link和visited只能用于a标签
E:link:设置超链接a在未被访问前的样式 初始状态
E:visited:设置超链接a在其链接地址已被访问过时的样式 访问完了的状态
E:hover:设置元素在其鼠标悬停时的样式 鼠标悬停状态 应用很广
E:active:设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 点击状态
eg:
a:link{color: yellow;} /*初始文字颜色*/
a:visited{color: red;} /*访问完了的文字颜色*/
a:hover{color:black;} /*鼠标悬停链接上文字的颜色*/
a:active{color: blue;} /*点击和释放之间文字的颜色*/
一般link和visited设置相同样式,hover和acitve设置一样的样式
2.焦点伪类选择器 E:focus:设置对象在成为输入焦点时的样式。前提是E必须能获得焦点
eg:input:focus{color: red;}
3.否定伪类选择器 E:not(s):匹配不含有s选择符的元素E。
eg: 给该列表中除最后一项外的所有列表项加一条底边线
li:not(:last-child) { border-bottom: 1px solid #ddd; }
4.根选择器 E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
eg:html:root{color: red;} /*给html设置默认颜色red*/
5.孩子选择器
E:first-child,E:last-child,E:only-child,E:nth-child(n),E:nth-last-child(n)
E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n)
E:first-child:匹配E的父元素的第一个子元素E。注意E必须是E的父元素的所有子元素中的第一个孩子,要想使用这个选择器
E:last-child:匹配E的父元素的最后一个子元素E。注意E必须是E的父元素的所有子元素中的最后一个孩子,要想使用这个选择器
应用:1.一般用于修改列表的第一个或者最后一个列表项的样式 2.有多个重复的相同的标签时,设置首位不同样式时使用
注意:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素
eg: p:first-child{color:#f00;} <div> <p>我是一个p</p> </div> /*p标签内的文字变红了*/
eg: p:first-child{color:#f00;} <div> <h2>我是一个标题</h2> <p>我是一个p</p> </div> /*选择器失效了,因为p不是div的第一个孩子*/
注意(*-of-type都通用):要使下面这几个属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
E:first-of-type:该选择符总是能命中父元素的第1个为E的子元素，不论父元素的第1个子元素是否为E
1.注意和E:first-child的区别
eg:<style>
p:first-of-type { /*匹配div下的第一个p标签*/
color: #f00;
}
</style>
<div class="test">
<div>我是一个div元素</div>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
</div>
E:last-of-type:该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E
eg:<style>
p:last-of-type {/*匹配最后一个div的最后一个p元素*/
color: #f00;
}
</style>
<div class="test">
<div>我是一个div元素</div>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
E:nth-of-type(n):该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E
E:nth-last-of-type(n):该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E
6.其他一些重要的选择器
1.E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
eg:
<style>
input:checked + span {
background: #f00;
}
input:checked + span:after {
content: " 我被选中了";
}
</style>
<form method="post" action="#">
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
2.E:enabled:匹配用户界面上处于可用状态的元素E 匹配enabled的输入框
E:disabled:匹配用户界面上处于禁用状态的元素E 匹配disabled的输入框
应用:针对表单的输入框之类的,因为输入框具有disabled属性和enabled属性
3.E:target,@page:firsr,@page:left,@page:right 略
6.伪对象选择器 很重要常用 伪元素不会改变网页结构,因为伪元素不构成网页结构
1.E:first-letter/E::first-letter:选择每个E元素的第一个字母或文字 经常用于杂志第一个字下沉
注意:大括号和E:first-letter之间有空格 p:first-letter {}
应用:此伪对象常用于块级元素(行级元素要转成块级元素才能使用),经常用来配合font-size和float属性制作首字下沉效果
eg:<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
<h1>杂志常用的首字下沉效果</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
2.E:first-line/E::first-line:选择每个E元素的第一行
注意:1.此对象用于块级元素,行级元素必须使用display:block后才能使用该伪对象
2.大括号和E:first-letter之间有空格 E:first-line {}
3.E:before/E::before:在每个E元素内容之前插入内容 不影响网页结构
4.E:after/E::after:在每个E元素内容之后插入内容 after必须和content属性一起使用 重点
注意：before和after必须和content属性一起使用,content属性里面写要添加的内容 可以为伪元素设置css样式
before和after使用content添加地内容是行级元素
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{
width: 200px;
margin: 0 auto;
}
ul li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
ul li::after{
content: "";
display: block;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>我要自学网1</li>
<li>我要自学网2</li>
<li>我要自学网3</li>
<li>我要自学网4</li>
<li>我要自学网5</li>
</ul>
</body>
</html>
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>
5.E::placeholder:设置对象文字占位符的样式
eg:input::placeholder{color:green;}
<input type="text">
6.E::selection:设置对象被选择时的样式(文字被选择就是右键鼠标移动)
注意:::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)
eg:p::selection{color:red;}
<p>dsfaadf</p>
2.三种使用方式 文件引入 ,head头处引入,行内引入
<link rel="stylesheet" type="text/css" href="css文件路径">
<style>
</style>
<a style=""></a>
3.文本样式 文本不等同于文字,还包括行级元素和行内块级元素 ,字体样式,行样式 text font line (关键字)
颜色: color:颜色值;
文本居中,左对齐,右对齐 text-align:center left,right;
垂直居中:line-heigh:与文本元素高度值一致;
文本属性(text-)和字体属性(font-)
1.文本对齐: text-align vertical-align
text-align属性规定元素中的文本的水平对齐方式
属性值：none,center,left,right,justify(两端对齐,文字会出现在两端)
vertical-align属性规定元素中的文本垂直对齐方式 对行内元素,行内块级元素,表格元素有效(常用)
属性值:baseline 默认值对齐父元素的基线 sub对齐下标
super:对齐上标 top:文本和文字顶部对齐 bottom:底部对齐 middle:居中对齐
2.文本颜色: color(设置文本颜色)
合法颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值, opacity(设置颜色的不透明度 0是完全透明 1是不透明 取值范围0.0-1.0之间)
3.文本修饰: text-decoration === text-decoration-line, text-decoration-color(指定文本装饰的颜色), text-decoration-style(指定文本装饰的样式),
text-decoration(是老版本的文本修饰,text-decoration-line是新版本的):主要用来删除链接的下划线 等价于 text-decoration-line 指定文本装饰的种类
text-decoration:none 删除链接的下划线
属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值)
或者直接写 text-decoration:#f00 solid underline; 用这个建议,因为简单
text-decoration-color:定义文本修饰线的颜色
text-decoration-style:定义文本修饰线的样式
属性:solid：实线
double：双线
dotted：点状线条
dashed：虚线
wavy：波浪线
3.文本阴影text-shadow:设置元素中文字的阴影效果
可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果 Demo: 火焰文字 霓虹文字
属性:none：无阴影
text-shadow:值1 值2 值3 值4;
值1:水平阴影位置 必须写的属性值 正值时,阴影在右,负值时,阴影在左
值2:垂直阴影位置 必须写的属性值 正值时,阴影在下,负值时,阴影在上
值3:阴影模糊距离 可选参数
值4:阴影颜色 可选 默认和文字颜色一样
eg:给文字添加模糊效果
p{
text-shadow: 0px 0px 2px red;
}
eg: text-shadow:1px 1px 0.1px red;
4.行高:如果行高的高度等于盒子的高度，可以使本行文本垂直居中，仅适用单行文本
应用:使行级元素垂直居中
line-height：就是行高的意思，指的是一行的高度 默认是normal
line-height:100px 一般把heigth和line-heigth设置成一样,表示垂直居中
取值:normal,尺寸单位,数字(按照font-size的倍数设置行高),百分比(按照当前字体尺寸的百分比设置行高)
行高 line-height:用于设置文本垂直居中
1.针对单行文本垂直居中
针对单行文本垂直居中公式：行高的高度等于盒子content区域的高度(即height),可以使当行文本垂直居中，
line-height = height
注意只适用单行文本。
2.针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，
假如是5行，再看一下行高，如果行高是line-
height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;
那么设置盒子的padding-top:75px;
同时保证盒子的高度为300px,那么高度改为225px;
5.文本转换: text-transform
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
属性值:
uppercase(将每个单词转换成大写),lowercase(将每个单词转换成小写),capitalize(将每个单词的第一个字母转换成大写)
none：无转换,
6.字间距: letter-spacing 了解即可 直到letter是字的意思即可
可以设置负值,%,px,em
属性值:normal
7.首行缩进: text-indent属性规定文本首行缩进的距离, 单位使用em(当前文字的尺寸)
text-indent:只能用于文本首行缩进距离,默认值是0
eg:p{
text-indent: 2em;//首行缩进两个汉字尺寸
text-indent: 1em;//首行缩进一个汉字尺寸
}
字体属性:
1.字体大小(字号): font-size 单位可以用:px,em,rem,%
font-size表示设置字体的大小,如果设置成inherit表示继承父元素的字体大小值
属性值是字体大小
eg: font-size:100px
2.字体粗细: font-weight
font-weight表示设置字体的粗细
属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值)
eg:font-weight:100; 注意没有单位
3.字体系列: font-family 计算机的 C://windows/Fonts 里面右本计算机的所有下载的字体
font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif,"宋体"
如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止
4.字体样式(风格): font-style
font-style: 字体;
属性值:
italic:斜体
oblique:表示中间状态的倾斜 没有italic倾斜
normal:正常字体样式 经常用来重置字体
重置字体样式:
1.给i标签和b标签,清除字体样式 这样多了两个无样式标签
i,b{font-weight: normal;font-style: normal;}
5.书写模式:
dirction: 检索或设置文本流的方向
属性值:
ltr(left to rigth)：文本流从左到右。
rtl(right to left)：文本流从右到左。
eg: dirction:rtl;unicode-bidi:bidi-override; 注意从右到左必须加 unicode-bidi:bidi-override;否则默认无效
unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
属性值:默认值是 normal
normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
embed：对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序。
bidi-override：严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则
writing-mode:设置或检索对象的内容块固有的书写方向
适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素
属性值: 注意:此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）
eg:导航栏实例 float表示浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
overflow: hidden;
margin: 0 auto;
background-color: purple;
border-radius: 5px;
}
.nav ul li{
float:left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
text-decoration: none;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
font-family: "Hanzipen SC"；
}
.nav ul li a:hover{
background: red;
font-size: 22px;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
</ul>
</div>
</body>
</html>
4.背景样式 背景图片的添加一般在body标签上面添加
背景颜色:background-color:颜色值;
背景图片:background-image:url("路径");
背景图片平铺效果 x轴,y轴,不平铺,默认值是在x,y方向上都平铺(repeat):平铺 <==> 重复出现
background-repeat: repeat-x; /*x方向上平铺 y方向上平铺 不平铺 x,y方向上都平铺 从父级元素继承*/
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: repeat;
inherit：规定应该从父元素继承background-repeat属性的设置。
background-repeat: inherit;
背景图片定位:background-position:x轴,y轴;
background-position：属性设置背景图像的起始位置，这个属性设置背景原图像的位置。
属性值:
<percentage>：用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
<length>：用长度值指定背景图像填充的位置。可以为负值。
center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始。
eg:特殊用法 background-position:left 100px top 10px; 图片距离左边界100px,距离上边界10px
背景图片不随窗口滚动而改变: background-attachment:fixed
background-attachment:设置或检索背景图像是随对象内容滚动还是固定的
属性值:
fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
注意： background-origin和background-clip之间的区别
background-origin:设置背景图片从哪个位置开始绘制,但最终是否显示由background-clip决定
属性值:默认值 padding-box
padding-box: 从padding区域（含padding）开始显示背景图像。
border-box: 从border区域（含border）开始显示背景图像。
content-box: 从content区域开始显示背景图像。
eg：
background-origin:border-box;
background-origin:padding-box;
background-origin:content-box;
background-clip:设置背景图片的哪个部分可以显示,默认是 border-box
属性值:注意,剪裁仅限于本盒子
padding-box： 只示padding(包括padding)里面的背景 别的地方的背景剪掉
border-box： 只显示border(包括border)里面的背景 别的地方的背景剪掉
content-box： 只显示content(包括content)里面的背景 别的地方的背景剪掉
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit
background-size:设置背景图片的尺寸大小
属性值: 默认值auto
<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
注意:
该属性提供2个参数值(特性值cover和contain除外)。
如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
一种简化用法: 属性值顺序随机,想怎末设置就怎末设置
background:red,url(../img/68AFE76E2C1BE146D0B0E10C3F52E81B.jpg),no-repeat,fixed,
5.行内元素和块级元素转换 块级元素和行内元素 区分;
重点 标签分两种等级:行内元素和块级元素
行内元素:(特点) dispaly:inline;
1.与其他元素并排,可以和其他元素呆在一行
2.不能设置宽高 行级元素的宽高由元素内容的宽高决定
块级元素:(特点) display:block;
1.能独占一行
2.能设置宽高,如果不设置,默认宽度和父级元素宽度一样 高度由元素内容的高度决定
行内块级元素:(特点) display:inline-block;
1.可以和其他元素呆在一行
2.可以设置宽高 当没有设置宽高时,宽高由元素内容决定 eg:img
块级元素和行内元素的分类：
在HTML的角度来讲，标签分为：
1.文本级标签：p , span , a , b , i , u , em
2.容器级标签：div , h系列 , li , dt ,dd
p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。
从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
1.行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。
2.块级元素：所有的容器级标签，都是块级元素，以及p标签。
块级元素可以嵌套块级元素和行内元素,行内块级元素
行级元素只能嵌套行级元素和行内块级元素
p,h标签是特例是块级元素,但是不能嵌套块级元素
行内元素和块级元素的转换:
将行内元素转化为块级元素:display:block;
将块级元素转换为行内元素:dispaly:inline;
6.盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
您指定一个CSS元素的宽度width和高度height属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距
盒子模型 margin(外边距) outline(轮廓,这个可以设置,位于border的外面为了标识) border(边框) padding(内边距) content(内容)里面用来放文本,图像,视频等内容 --------- 重点
盒模型属性: 盒子模型图片见 img/盒子模型图片.png
1.width:内容的宽度
2.height:内容的高度
3.padding:内边距,边框到内容的距离
4.border:边框,指的是盒子的宽度(盒子形状的线)
5.margin:外边距,盒子边框到附近最近盒子的距离
盒子模型的计算：
1.盒子的真实宽度=width+2*padding+2*border*2
2.盒子的真实高度=height+2*padding+2*border*2
3.所以，标准盒模型，width不等于盒子真实宽度，
如果要保持盒子的真是宽度，那么加padding就一定要减width,减padding就一定要加width。
真实的高度同样这样设置。
padding(内边距或填充)：
属性:
padding:在一个声明中设置四个方向的所有填充属性
padding-bottom:设置元素的底部填充
padding-left:设置元素的左部填充
padding-right:设置元素的右部填充
padding-top:设置元素的上部填充
属性值:
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
1.padding:就是内边距的意思，是边框到内容之间的距离。
2.padding的区域是有背景颜色的，并且背景颜色和内容的颜色一样，
也就是说background-color这个属性将填充border以内的所有区域。
4.一些标签默认有padding:
比如ul标签，有默认的padding-left值。
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。
以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But，这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签
（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
border:边框,就是盒子的边框
1.边框border有3个要素:线宽(border-width),线型样式(border-style),颜色(border-color)
border:代表四个方向的边框 border-top border-right border-bottom border-left
border-style:设置边框样式
属性值:
none: 默认无边框
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
border-width:设置边框宽度
border-color:设置边框颜色 必须和border-style一起使用才有意义
border可以设置上右下左的样式 border-top,border-right,border-bottom,border-left 他们四个都有边框的三个属性 eg: border-top-color
2.如果颜色不写,边框默认是黑色。如果粗细不写，不显示边框。
如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
3.设置圆角边框 border-radius 重点
border-radius
border-上下-左右-radius
圆角边框属性:
1.圆角方向:通过垂直和水平方向可以表示一个角
方向1:表示上下 只能是上下
方向2:表示左右 只能是左右
eg:border-top-left-radius:; 设置右上角为圆角边框
2.圆角半径:写一个半径表示的是园 另一个半径2和1默认相同
半径1:水平半径
半径2:垂直半径
eg:border-bottom-left-radius:10px; 设置右下角为圆角边
3.当使用百分比设置半径1和半径2 可以设置各种形状 实际情况:园,椭圆都是这样设置的
百分比用的是盒子水平/垂直长度的百分比
eg:border-radius:50% 50%; 如果盒子宽高一样,那麽这是一个圆
eg:border-radius:50%; 园
同理可以设置椭圆
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #00ffff;
border-radius: 50% 50%;
}
</style>
</head>
<body>
<div>djsfaj</div>
</body>
</html>
4.border-radius 同时设置四个园角的边框半径
形式1:border-radius:左上半径 右上半径 右下半径 左下半径 (符合上右下左)
形式2:border-radius:半径 设置四个圆角半径一样
border-radius: 10px; /*设置边框的四个边角 圆的半径*/
4.边框阴影:可以是图片或者背景更有立体感 box-shadow 文本阴影:text-shadow
box-shadow:值1 值2 值3 值4 值5;
值1:水平阴影位置,必须有的参数 正值时,阴影在右边,负值时,阴影在左边
值2:垂直阴影位置,必须有的参数 正值时,阴影在下边,负值时,阴影在上边
值3:阴影模糊距离 可选值
值4:阴影尺寸, 可选值
值5:阴影颜色,合法颜色值,可选 默认黑色
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
width: 200px;
height: 200px;
border-radius: 4px; //设置圆角边框
box-shadow: 1px 1px 1px 1px #ccc; //设置边框阴影
}
</style>
</head>
<body>
<img src="img/b.gif"/>
</body>
</html>
outline:轮廓属性(也叫外边框),是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用
应用:可以用来取消input和textarea等输入框的outline样式,因为太丑了 原来点击input边框外面会变黑
outline:在一个声明中设置所有的外边框属性
outline:none; 取消outline样式
eg:input{outline: none;}
注意:属性和border用法一样,但是不同的是outline没有outline-left这类单独表示方向的属性
outline-color
outline-style
outline-width
margin:外边距(表示本边框到其他盒子的最近距离),5个属性
属性:
margin:在一个声明中设置所有外边距属性
margin-bottom:设置元素的下外边距
margin-left:设置元素的左外边距
margin-right:设置元素的右外边距
margin-top:设置元素的上外边距
属性值:margin可以使用负值，重叠的内容。
auto 设置浏览器边距。这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
margin: 20px auto; 使盒子居中,并且和上右下左的边界距离为20px
注意：前面写几个值,表达的含义不一样,https://www.php.cn/manual/view/33005.html
margin:像素值 auto; 像素值是距离上下左右边界的 设置元素居中对齐
条件:此元素必须为块级元素,而且必须有宽高;
margin:20px,auto; 和上边界距离为20px,元素居中对齐
6_1.css的尺寸
属性:
height:设置元素的宽度
line-height:设置行高
max-height:设置元素的最大高度
max-width:设置元素的最大宽度
min-height:设置元素的最小高度
min-width:设置元素的最小宽度
width:设置元素的宽度
6.元素定位: 详见博客 position:指定元素的定位类型 使用left,rigth,top,bottom确定位置 eg:元素距离左边距离left
如果display设置为none,那末float及position属性定义将不生效；
position的属性值:
1.静态定位(static):所有元素的默认定位方式 元素不可以改变位置 要想元素可以改变位置定位不许设置成absolute,relative,fixed
注意:1.HTML元素的默认值,即没有定位,元素出现在正常的文档流中。
2.静态定位的元素不会受到top, bottom, left, right影响 其他定位都收他们四个属性影响
2.绝对定位(absolute):可重叠,通过z-index控制, position: absolute;
注意:
1.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>定位
2.absolute定位使元素的位置与文档流无关,因此不占据空间。
3.absolute定位的元素和其他元素重叠。
eg:绝对定位可以设置重叠的样式
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>
3.相对定位(relative):相对定位元素不可层叠。依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
相对定位元素经常被用来作为绝对定位元素的容器块。
注意：绝对定位和相对定位的区别,绝对定位是相对于父亲或者祖先的,而相对定位是相对于原本自身应该在在的位置的定位
eg:
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>
4.固定定位(fixed):固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
5.粘性定位(sticky):很有用 position:sticky;基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动,在postion:relative和position:fixed定位之间切换
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
6.重叠的元素 z-index搭配 position:absolute;一起使用,因为只有绝对定位支持元素重叠
z-index属性指定了一个元素的堆叠顺序(哪个元素放在前面,哪个元素放在后面)
属性值:number(可正可负),auto,inherit
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定 z-index,最后定位在HTML代码中的元素将被显示在最前面。
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
eg:<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>z-index_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.z1,
.z2,
.z3 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
.z1 {
z-index: 1;
background: #000;
}
.z2 {
z-index: 2;
top: 30px;
left: 30px;
background: #C00;
}
.z3 {
z-index: 3;
top: 60px;
left: 60px;
background: #999;
}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
7.界面布局
dispaly: 太强大了
作用:1.块级元素和行级元素转换
块级变行级:display:inline;
行级变块级:display:block
2.隐藏对象但是不占据物理空间 display:none;
3.设置元素变成表格之类的
p{display: inline;}
span{display: block;}
css中所有的浮动属性
float:设置浮动,clear:清除浮动
元素的水平方向浮,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
几种重要应用:
1.如果图像是右浮动,下面的文本流将环绕在它左边
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
2.彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>
3.创建一个没有表格的网页,使用float创建一个网页页眉、页脚、左边的内容和主要内容。
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>底部文本</p>
</div>
</body>
</html>
float: 用于浮动布局(元素挨着),指定一个盒子(元素)是否可以浮动
注意:
1.css的float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
float(浮动),往往是用于图像,但它在布局时一样非常有用
属性值:
left:设置元素水平从左向右浮动
right:设置元素水平从右向左浮动
inherit
none
clear:指定不允许元素周围有浮动元素 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
属性值:
left:左边不许有浮动
right:右边不许有浮动
both:两边不许有浮动
none:无
inherit
eg:clear属性指定元素两侧不能出现浮动元素,使用clear属性往文本中添加图片廊
clear:both;设置两边没有浮动
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>
visibility:设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
属性值:
visible：设置对象可见 默认值
hidden：设置对象隐藏 占用空间
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
overflow:检索或设置对象处理溢出内容的方式
属性值:
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
overflow === overflow-x + overflow-y
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>
cursor:显示光标移动到指定的类型
属性值:
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
8.列表 列表项标志就是列表项li前面的样式
list-style:下面三个样式的综合,使用时 list-style-image的属性值必须放在最后
eg:list-style:none;清楚列表样式
list-style-image:用图像做列表项标志。就是让每个li前面多了一个图像
属性值:
none：不指定图像，默认内容标记将被 <' list-style-type '> 代替。
<url>：使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 <' list-style-type '> 代替
list-style-position:设置列表中列表项标志的位置
属性值:
outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
list-style-type:设置列表项标志的类型
属性值: 可以设置选项 A B C D
disc：实心圆(CSS1)
circle：空心圆(CSS1)
square：实心方块(CSS1)
decimal：阿拉伯数字(CSS1)
lower-roman：小写罗马数字(CSS1)
upper-roman：大写罗马数字(CSS1)
lower-alpha：小写英文字母(CSS1)
upper-alpha：大写英文字母(CSS1)
none：不使用项目符号(CSS1)
armenian：传统的亚美尼亚数字(CSS2)
cjk-ideographic：浅白的表意数字(CSS2)
georgian：传统的乔治数字(CSS2)
lower-greek：基本的希腊小写字母(CSS2)
hebrew：传统的希伯莱数字(CSS2)
hiragana：日文平假名字符(CSS2)
hiragana-iroha：日文平假名序号(CSS2)
katakana：日文片假名字符(CSS2)
katakana-iroha：日文片假名序号(CSS2)
lower-latin：小写拉丁字母(CSS2)
upper-latin：大写拉丁字母(CSS2)
9.css媒体类型:@media 媒体类型
属性:@media规则允许在相同样式表为不同媒体设置不同的样式。
属性值:
all:用于所有媒体设备
aural:用于语音和视频合成器
braille:用于盲人用点字法触觉回馈设备
embossed:用于分页的盲人用点字法打印机
handheld:用于小的手持的设备
print:用于打印机
projection:用于方案显示,例如打印机
screen:用于电脑显示屏
tty:用于固定密度字母栅格的媒体,比如终端
tv:用于电视机类型的设备
eg:<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>;
10.css响应式设计 重点
1.viewport:是用户网页的可视区域,中文叫视区
application-->手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中
设置viewport,一个常用的针对移动网页优化过的viewport meta标签如下:
eg:<meta name="viewport" content="width=device-width,initial-scale=1.0" />
width:控制viewport的大小,可以指定一个值,如果600,或者特殊的值devic-width设备宽度
height:控制viewport的高度
initial-scale:初始化比例,也即是页面第一次load的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放
2.网格视图:很多网页都是基于网格设计的,说明网页是按照列来布局的
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
11.css框架 bootstrap,layui,vue
12.css基础知识
1.常用尺寸单位
像素:px 屏幕上的一个点做单位(计算机图形学讲过)
em:用元素本身的字体的font-size属性值做参考 是font-size倍数的关系
1em = font-size *1 px
eg:p{width:20em;} 那么width=20*p的font-size px
<p>dafsa</p>
rem:依据html元素的font-size做参考 用法:可以通过修改html的font-size大小影响所有rem单位的元素大小 用于响应式开发
1rem = html的font-size*1 px
2.颜色表示和16进制颜色值
html和css规范中定义了147中可用的颜色值
1.rgb(红,绿,蓝) r:0-255 g:0-255 b:0-255
2.rgba(红,绿,蓝,透明度(0.0-1.0))
3.16进制表示颜色方式 #rrggbb r:红色(00-ff 十六进制表示) g:绿色(00-ff) b:蓝色(00-ff)
eg:红色 #ff0000 绿色 #00ff00 蓝色 #0000ff