HTML CSS学习笔记5，6

一，Css优先级

1.相同样式优先级

后面的优先级较高，但不建议出现重复设置样式的情况。

2.内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3.单一样式优先级

style行间＞ID＞class＞tag＞*＞继承

注:style行间 权重 1000

     id              权重  100

     class        权重  10

     tag            权重  1

4.! important

提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升。）

5.标签+类与单类

标签+类＞单类 

6.群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。

7.层次优先级

（1）.权重比较

ui li .box p input｛｝ 1+1+10+1+1

.hello span ＃elem｛｝ 10+1+100

（2）.约分比较

ui li .box p input｛｝ 约完之后:  li p input｛｝

.hello span ＃elem｛｝约完之后:＃elem｛｝

二，css盒子模型

组成:content（物品）-＞padding（填充物）-＞border（包装盒）-＞margin（盒子与盒子之间的间距）

content:内容区域 width和height组成的

padding:内边距（内填充）

          只写一个值:30px（上下左右）

          有两个值: 30px 40px（上下，左右）

          写四个值:30px 40px 50px 60px（上 右 下 左）

     单一样式只能写一个值:

             padding-left

             padding-right

             padding-top

             padding-button

margin:外边距（外填充）

          只写一个值:30px（上下左右）

          有两个值: 30px 40px（上下，左右）

          写四个值:30px 40px 50px 60px（上 右 下 左）

     单一样式只能写一个值:

             margin-left

             margin-right

             margin-top

             margin-button

注:1.背景色填充到margin以内的区域。

     2.文字在content区域添加

     3.padding不能为负数，而margin可以为负数。

box-sizing

盒尺寸，可以改变盒子模型的展示形态。

默认值:content-box:width, height-＞content

border-box:width，height-＞content padding border

使用的场景:1.不用去计算一些值

2.解决一些100%的问题。

盒子模型的一些问题

1.margin重叠问题，出现在上下margin同时存在的时候。会取上下值中较大的。

2.margin传递问题，出现在嵌套的结构中，只针对margin-top的问题。

（解决方法:1.给父容器加边框 2.换成给父容器加padding-top）

扩展:1.margin左右自适应（margin:0 auto），上下自适应不行

2.width不设置，会自动去计算容器的大小。

三，标签分类

按类型

block:div，p，ul，li，h1...

1.独占一行

2.支持所有样式

3.不写宽的时候和父容器的宽相同

inline: span，a，em，strong，img...

1.挨在一起

2.有些样式不支持，例如:width，height，margin，padding

3.不写宽的时候，宽和内容有关

4.所占的区域不一定是矩形

5.内联标签之间会有空隙，原因:换行产生的

inline-block: input, select.....

又有块的特性又有内联的特性

注:布局一般用块标签，修饰文本一般用内联标签

按内容

flow:流内容

metadata:元数据

sectioning:分区

heading:标题

phrasing:措辞

embedded:嵌入的

interactive:互动的

（详情: https://www.w3.org/ TR/html5/dom.html）

按显示

替换元素:浏览器根据元素的标签和属性来决定元素的具体显示内容。

img,input..

非替换元素:当内容直接告诉浏览器，将其显示出来。

div，h1,p...

四，显示框类型

display:block,inline, inline-block, none...

区别:

display:none 不占空间的隐藏

visibility:hidden 占空间的隐藏

五，标签嵌套规范

ul,li,

dl,dt,dd

table,tr,td

块能够嵌套内联

块嵌套块

（特殊的不可以嵌套，例如<p><div></div></p>）

内联不能嵌套块

（特殊的可以，例如<a herf＝"＃"><div></div></a>）

六，溢出隐藏

overflow:

          visible:默认

          hidden:直接溢出隐藏

          scroll:出现滚动条

          auto:内容多的话出现滚动条

x轴，y轴

overflow-x,overflow-y针对两个轴分别设置

七，透明度与手势

opacity:0（透明，占空间）～1（不透明）

0.5（半透明）

注:占空间，且所有的子内容也会透明。

rgba（）:0～1

注:可以让指定的样式透明，而不影响其他样式。

cursor:手势

defauly:默认箭头

如何实现自定义箭头:

准备图片: .cur . ico格式

cursor: url（./ img/cursor. ico），auto；

八，最大，最小宽高

min-width, min-height

max-width, max-height

%单位:换算->以父容器的大小进行换算

一个容器怎么适应屏幕的高:容器加height:100%；  body:100%    html:100%

html, body{height：100%；}

. comtrainer{ height:100%}

九，css默认样式

没有默认样式: div，span

有默认样式:

body->margin:8px

h1-> margin:上下21.440px

p-> margin:上下16px

ul-> margin:上下16px padding:左 40px

       默认点:list-style:disc

a-> text-decoration: underline；

css reset:

*{ margin:0 padding:0}

优点:不用考虑哪些标签有默认的margin和padding

缺点:稍微有影响性能

ul{list-style: none；}

a{ text-decoration: none；color:＃999；}

img{display: block}

问题的现象:图片跟容器底部有一些空隙

内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

vertical-align: baseline；基线对其方式，默认值。

img{ vertical-align: bottom；}底线对齐

写具体页面时或一个布局效果的时候；

1.写结构。

2.Css重置样式

3.写具体样式。