标签：elevation display sheet during etc word 位置 input 滚动条
CSS （cacading style sheets）
决定html标签以什么形式在网页中显示出来、
css样式引用优先级 外部式<嵌入式<内部式 内联式优先级最高
<link>标签定义了文档与外部资源之间的关系，通常用于连接到样式表；
EG:<link rel="stylesheet" href="CSS1.css">
分组选择器
p，a{ 子选择器 }
p a{ 后代选择器 }、
类选择器，用点.来做前缀的是为类名
.leiming（类选择器）
伪类选择器
***h1:hover{color: blue;} 鼠标悬停变色
***a:link{ }未选择的链接样式
***a:visited{ }已经访问过的链接样式
***a:active{ }鼠标点中未移开时
ID选择器 只能在文档中使用一次
用#符号命名，只能用英文字符起名
text-indent:20xp; 缩进
text-indent:2em;缩进两个字符,可以小数
text-align:center;居中 left居左 right居右
letter-spacing:18px;减少字符间隔
line-height: 60px;行高，通常比字体像素大
text-decoration:overline 文字上划线（上方） underline 文字下划线（下方） line-through 文字删除线（中间）;
a{
font-size: 20px;
font-weight: bold;加粗
font-family: 微软雅黑;
text-decoration:line-through;删除线位置 }
font-style:italic;斜体
vertical-align：top；bottom；都是顶部 middle 居中（有图片等因素时需要以图片标签位参照对象进行设置）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
一、块级元素
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
设置CSS样式display:block就是将行内元素显示为块级元素。
div、h、p 、form、hr、br、cl、ol、li、table、tr可调节宽高，但不能与其他元素并联
二、内联元素 内部不可包含块状元素
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
a、span、strong、em、input
三、内联块状元素
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
img
当然块状元素也可以通过代码display:inline将元素设置为内联元素。
display:inline-block;
inline-block; /*让该元素以行内块状的方式去显示*/
none；隐藏
block；块状
边距
padding: 20px;内边距
padding: 20px 20px 20px 20px;上下左右
padding: 20px 20px；上下 左右
padding-top -left -right -bottom
margin:10px;外边距
margin-top 上
margin-left 左
margin-right 右
margin-bottom 下
border：1px solid green；
border-top: 0px solid transparent;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom:100px solid orange;
border-radius：100px；圆角
!important会使所在行优先级成为最高优先执行代码
*******CSS 继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签
元素，而且应用于其后代。
注意有一些css样式是不具有继承性的。
继承最大的好处就是你可以用很少量的代码为一致性的可视化设计建立一个基础。
而且这些样式甚至将作用到你还没写的 HTML 上。
=====================================================
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、
border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、
border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、
border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、
border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、
padding-bottom、padding-left
4、背景属性：background、background-color、background-image、background-repeat、
background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、
max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
=====================================================
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，
但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate
、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性：visibility hidden 隐藏但会占据原来的内容位置
2、光标属性：cursor
display：none；隐藏但不会占据原来的内容位置
一个盒子占据网页内容为本身内容宽度+左右内侧边距+左右侧边框+左右侧外边距
width、heigh定义的室内ring的高度，并不是总宽度
1、流动模型（Flow） 网页默认模型
2、浮动模型 (Float) float：值可以有 left right 浮动，是实现图片的文字环绕效果。可以隐性的改变一个元素为
内联块状元素，会使父级元素高度塌陷，
word-break：break-all； 使英文内容能够换行，使浮动效果实现
clear:both; 清除浮动 两边都不允许有浮动 注：清除浮动的属性，必须将元素变为块级元素才能生效
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
3、层模型（Layer）（定位模型）
position 属性
static默认值
relative 相对定位（相对原来位置进行偏移）
absolute 绝对定位
fixed 固定定位 （固定在屏幕某个位置上，不随滚动条变化）
z-index 制定一个元素的堆叠顺序
overflow：hidden ；隐藏溢出的内容
：visible ；正常显示溢出内容
：scroll ；如果有溢出显示滚动条
box-shadow 水平阴影的位置，
标签：elevation display sheet during etc word 位置 input 滚动条
原文地址：https://www.cnblogs.com/hejiabin/p/9688546.html
