css-选择器优先级-尺寸与边框-盒模型/框模型

选择器优先级

判断	根据选择器的权重（值）进行优先级判断 id       选择器    100 类/伪类  选择器     10 标签选择器          1   注意： 1.组合选择器的权重，由各个选择器的权重相加得到 2.选择器的优先级与书写顺序无关，只看权重 3.行内样式的优先级最高

 

 

尺寸与边框

尺寸	尺寸单位： px 像素，最常用的单位，也是游览器默认单位 %  百分比  占据父元素对应属性的占比 -----------------以下为绝对单位，不常用---------------- in   英寸  1  in  =  2.54 cm pt   镑    1  pt  =  72/1 in cm  厘米 mm  毫米  注意： css  中的尺寸单位是不能省略的 0 除外
	尺寸属性： 作用：    改变元素的宽度和高度    属性 width  height    取值为数值，单位为px  或 % 使用：    所有的块级元素可以设置宽高    默认情况下宽度与 父元素保持一致， 高度由内容决定； 所有的行内元素不可以设置宽高，大小由内容决定 内容溢出处理： 属性： overflow 取值： 1.visible   默认值，溢出部分可见        2.hidden   溢出部分隐藏，不可见        3.soroll   设置内容滚动显示，显示滚动条        4.auto    自动，当内容溢出时， 自动添加滚动条并且可用          注意：  scroll 表示显示水平和垂直方向的滚动条， 不管是否真的需要        auto 根据内容需要， 添加水平或者垂直方向的滚动条
颜色	颜色取值： 英文单词  red  green  blue… 取值十六进行 #aabbcc 每两位一组代表一种三原色， 三组分别对应红绿蓝 每一位取值范围 0-9 a-f 短十六进行 #abc   由三位组成，每一位就代表一种三元色           游览器在渲染时会自动对每一位进行重复， 补全成六位的十六进行  #abc  = #aabbcc Css 提供的颜色表示法 rgb（r,g,b）每个值取值 0 – 255 红色  rgb（255,0,0）#f00  red Css 提供的颜色表示法    rgba（r,g,b,alpha） 颜色取值0 – 255    alpha 表示透明度 取值0-1 （透明-不透明）
边框	属性 border 取值  border-width  宽度 border-style       设置边框线的样式，取值 Solid   实线 Dashed 虚线 Dotted  点线 Double  双线（不常用） boreder-color  颜色 transparent 表示透明色 特殊用法 取消边框 border ：none；  单边框设置：   border  属性用来设置  上右下左   四个方向的边框   四个方向单独设置边框：    Border-top ： 5px  solid  red；    Border-right： 10px  solid  green；    Border-bottom：10px  solid  green； Border-left：10px  solid  green；       网页三角标制作 元素尺寸为0 为元素添加四个方向的边框 设置其中三条边框颜色为透明   圆角边框 属性： border-radius 取值： px 或 % 作用： 将边框的直角变成圆角 例子：    border-radius ： 10px； 表示四个角都按照10px的半径取生成圆角    border-radius： 5px  10px  15px  20px； 四个值代表了上右下左四个角    border-radius：10px  20px； 第一个值表示上下，第二个值表示左右    border-radius  5px  10px  15px； 第四个值默认跟第二个值一致       注意：边框圆角在元素不设置边框的情况下依然有效， 可以通过设置50% 呈现圆形或椭圆形，修改元素形状   边框阴影   属性：box-shadow   取值：h-offset  v-offset  blur  spead  color;   h-offset  : 表示阴影的水平偏移距离 （取值数字 正数向右偏移 负数向左偏移）   v-offset  : 表示阴影的垂直偏移距离       （取值数字 正数向下偏移 负数向上偏移）   blur：  阴影的模糊程度        （取值数字  值越大越模糊）   spread ：阴影扩大或是缩小的距离         （取值数字  正数会扩大  负数会收缩）    color： 设置 阴影颜色   游览器坐标系   默认游览器左上角为原点， 向右向下为x轴y轴的正方形， 向左向上为负方向

 

 

 

 

盒模型/框模型

1.元素皆为框	作用：    元素在文档中占据尺寸的计算方式  组成：外边距margin  边框border  内边距 padding  内容尺寸  计算方式：      标准盒模型： 最终width = 左右外边距+左右边框+左右内边距+内容宽度 最终height= 上下外边距+上下边框+上下内边距+内容高度   （了解）怪异盒模型：        元素内容宽度 = 左右内边距+边框+内容
	外边距： 元素边框与边框之间的具体 语法： 属性 margin （2） 取值： margin ：10px ; 表示上右下左四个方向都设置10px外边距 margin : 10px  20px; 表上下为10px 20px margin : 10px  20px  30px; 表示上右下左四个方向的外边距 （3）特殊值： margin : 0 auto； 表示自动，可以用来设置元素居中   （4） margin 取值可以分为正负 正值： 代表正方向 负值：  代表负方向 margin  设置为负值，元素将进行偏移 （5）四个方向单独设置外边距            margin-top  设置上方的外边距            margin-right  设置右边的外边距            margin-bottom 设置底部外边距            margin-left   设置左边外边距           取值同样是数值，取一个值   （6）具有默认外边距的元素：       body， h1 , h2 , h3 , h4 , h5 , h6 , p , ul , ol{       margin：0；#取消默认外边距 }
	内边距padding 元素的内容与元素边框之间的距离        通过设置width height 属性， 实际上设置的是元素内容的大小 使用： 属性 padding 取值 数值，可以给定 1/ 2/ 3/ 4/个值 Padding： 2px；   上右下左四个方向都为2px的内边距 Padding： 10px  20px； Padding： 10px  20px  30px； Padding： 10px  20px  30px  40px； 具有默认内边距的元素 ol, ul, input(文本框，密码框，按钮会存在) ol, ul, input{      padding：0； } 页面开发时，清除游览器的默认边距 body，ul, ol, h1, h2, h3, h4 ,h4 h5 ,h6 ,p{    magin:0;    Padding:0; } input  可以根据需求单独设置   盒模型属性的支持度   盒模型属性：margin  border  padding  width  height 块元素对盒模型属性完全支持 行内元素对盒模型属性部分支持： 行内元素可以设置 左右 的内外边距 不可以设置 宽高  及  上下外边距   元素类型转换 属性: display 取值： inline  行内元素 block  块元素 inline-block  行内块 none   元素隐藏   文本居中显示        水平居中：text-align：center；        垂直居中：设置隐藏 高度height与行高       line-height：保持一致