03-CSS文字属性/盒子模型

`css`文字属性

• font-family字体类型

  • 我们在定义的时候要注意，要是用户电脑上没有这个字体的时候怎么办

  • .box{font-family:Tahoma,'Microsoft Yahei',SimSun;}/*字体类型*/

  • 字体中有多个字体的时候，如果前面的字体没有就使用后面的字体

• font-size字体大小

  • 单位：px|%|em|rem

  • % 相对于父容器中字体%调整

  • 1em 等于父级的字体尺寸——相对于父级字体大小而言

  • rem 相对于html（跟标签）的字体大小

• font-weight字体粗细

  • 关键字

    • normal 默认字体

    • lighter 较细

    • blod 较粗

    • bolder 很粗

  • 给值

    • 100-900只能给整百数，值越大字体越粗

    • 400相当于正常的

    • 700相当于blod

• font-style字体类型（规定是否倾斜）

  • normal 文字正常

  • italic 文字斜体(属性)

  • oblique 文字倾斜

• color文字颜色

  • 关键词

    • green、black等英文单词

  • #16进制值

    • #666666、#ddd

  • rgb(0-255,0-255,0-255)

    • r-red

    • g-green

    • b-blue

  • rgba(0-255,0-255,0-255,0-1)

    • r-red

    • g-green

    • b-blue

    • a-alpha透明度

      • 0 完全透明

      • 1 完全不透明

css文本属性

• text-decoration下划线、删除线、上划线

  • none默认值,可以用这个属性值去掉已经有下划线或删除线或上划线的样式

  • underline 下划线，一般用于文章的重点表明

  • overline上划线

  • line-through删除线

• text-transform文本大小写

  • none默认值 无转换发生

  • uppercase转换成大写

  • lowercase转换成小写

  • capitalize将英文单词的首字母大写

• text-align文本水平对齐方式

  • left 默认值，向左对齐

  • right向右对齐

  • center居中对齐

• text-indent首行缩进（em）

• line-height行高

• letter-spacing字距

• word-spacing词距

背景

• background-color背景色

• background-image：url（1.jpg)背景图片

• background-repeat背景平铺

  • repeat平铺，默认

  • no-repeat不平铺

  • repeat-xX轴平铺

  • repeat-yy轴平铺

  • 注意：只有背景图片的宽高小于被设置的背景的元素的宽高，才会有平铺效果

• background-position背景位置 X轴 Y轴

  • 关键词：(九宫格)

    • X轴left(默认) ,center,right

    • Y轴top(默认),center,bottom

  • 值：% px

  • 如果给一个值：第二个值默认center（50%）;

  • 值：X轴的值 Y轴的值如果给的是方位值：可以颠倒

• background-size背景大小

  • 值：% px

  • 给一个值的时候，默认X轴，Y轴默认auto;

  • auto 会等比例缩放

  • 特殊值

    • cover等比例缩放直到铺满X轴和Y轴/保持宽高比不变，保证占满盒子，但是不一定能看到全部图

    • contain 等比例缩放X轴或Y轴其中一个方向/保持宽高比不变，保证看清全图，但是不一定占满盒子

• background复合样式

  background:color image repeat position/size;

vertical-align垂直对齐方式

定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
top			元素的顶端与行中最高元素的顶端对齐 对齐到line-height的顶部
middle		此元素放置在父元素的中部  对齐到line-height 中部
bottom		元素的顶端与行中最低的元素的顶端对齐 对齐到line-height 底部
（与line-height相关）

text-top		元素的顶端与父元素字体的顶端对齐
text-bottom	     元素的底端与父元素字体的底端对齐。
baseline		默认。元素放置在父元素的基线上。

加vertical-align的同排元素都要vertical-align；

盒子模型

css盒子模型

• 所有的页面元素都可以看成一个盒子，并且占据着一定的页面空间

• 盒子模型是由content(内容)、 padding(内边距)、 margin(外边距)、 border(边框)这四个属性组成的。

border边框

• 复合样式：border:边框大小 类型 颜色;border:5px solid #006633;

• border-width: 5px;		大小
  border-style: solid;	类型
  border-color: red;	    颜色
  border-top:0px;       /*去除上边框*/
  border-top:none;      /*去除上边框*/

• border-width 边框大小

  • 四个值：上 右 下 左(顺时针)

  • 三个值：上 左右 下

  • 二个值：上下 左右

  • 一个值：四个方向值相等

  • border-top-width 顶部边框大小

  • border-right-width 右边框大小

  • border-bottom-width 底部边框大小

  • border-left-width 左边框大小

• border-style 边框类型

  • solid 实线

  • dashed 虚线

  • dotted 点线

  • double 双边框

  • border-top-style 顶部边框类型

  • border-right-style 右边框类型

  • border-bottom-style 底部边框类型

  • border-left-style 左边框类型

• border-color 边框颜色

  • 四个值：上 右 下 左(顺时针)

  • 三个值：上 左右 下

  • 二个值：上下 左右

  • 一个值：四个方向颜色一样

  • border-top-color 顶部边框颜色

  • border-right-color 右边框颜色

  • border-bottom-color 底部边框颜色

  • border-left-color 左边框颜色

• padding内边距，边框与内容之间的距离

  • 四个值：上 右 下 左(顺时针)

  • 三个值：上 左右 下

  • 二个值：上下 左右

  • 一个值：四个方向值相等

  • padding-top 顶部内边距

  • padding-right 右内边距

  • padding-bottom 底部内边距

  • padding-left 左内边距

  ​

• margin外边距，元素与其他元素的距离（边框以外的距离）

  • margin-top 顶部外边距

  • margin-right 右外边距

  • margin-bottom 底部外边距

  • margin-left 左外边距

  • 自动水平居中

    • margin:auto; 左右居中

    • margin:20px auto; 上下20px 左右居中

    • margin:20px auto 0; 上20px 左右居中 下0

盒子大小的计算

• content+border+padding盒子大小 = 样式宽 + 内边距 + 边框

• 盒子宽度 = 左border+左padding+width+右padding +右border

• 盒子高度 = 上border+上padding+height+下padding+下border

float浮动

• 浮动的定义：使元素脱离文档流 ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

• 文档流 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）

• 脱离文档流 ：在页面内中不占位置

• 浮动的一般情况

  • float:left;

  • float:right;

• 清除浮动

  • overflow: hidden;

  • .clearfix:after{content:'';display:block;clear:both;}  时下主流

position定位

• 规定元素的定位类型

• static 静态定位（没有定位），默认

• relative 相对定位，相对于其正常位置进行定位

  • 不会脱离文档流

  • 不影响元素本身的特性

  • 如果没有定位偏移量，对元素本身没有任何影响

• absolute 绝对定位，参考最近非static定位的父级进行定位

  • 使元素完全脱离文档流

  • 没有定位父级则相对于body(整个文档)发生偏移

  • 绝对定位一般配合相对定位使用

• fixed 固定定位，相对于浏览器窗口进行定位

• 方位词

  • left: 距离左边的距离

  • right: 距离右边的距离

  • top:距离顶部的距离

  • bottom:距离底部的距离

  • z-index 规定定位的层级（默认0）

    • 值：number 值越大层级越高

转载于:https://www.cnblogs.com/Jack-Ma/p/8645795.html