学前端有感

盒子模型（框模型）Box model

 

• 内容 - 框的内容，其中显示文本和图像。
• 内边距 - 清除内容周围的区域。内边距是透明的。
• 边框 - 围绕内边距和内容的边框。
• 外边距 - 清除边界外的区域。外边距是透明的0

为元素设置边框须指定三个样式

         border-width边框的宽度

         border-color：颜色

         border-style：样式

border-width能指定四个值 上 右 下 左（顺时针方向）

         如果给他指定三个值则设置给 上 左右 下

         两个值 上下   左右

边框默认值为none

border边框的简写，无顺序要求

内边距（padding）是盒子内容区与盒子边框之间的距离

          内边距的会影响盒子可见框的大小

外边距是当前盒子与其他盒子之间的位置（margin）

          如果只指定左或右则会将外边距设成最大

          设置上下的默认为0

          网页垂直方向相邻外边距设置值取最大值

Display：none不会显示元素会将其隐藏

Visible：none不显示但会占位置

子元素默认在父元素中

通过overflow规定父元素如何处理溢出

当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小

       而是会自动修改宽度和高度，以适应内边距

在文档流中

块元素

1. 1. 1. 1. 块元素会独占一行，自上而下
         2. 默认宽度是父元素的100%
         3. 块元素在文档流中高度默认被内容撑开

内联元素

1. 只占本身大小，从左向右排，若一行容纳不够则换下行
2. 内联元素被文档内容撑开

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小

    而是会自动修改宽度，以适应内边距

长度单位

像素px

     相当于屏幕中的小点

     屏幕就由小点组成

     em（与字体大小相关）和百分比类似1em=100px=1font-size

     rgb（红色浓度，绿色浓度，蓝色浓度）0-255之间的值；也可用%号表示

     用16进制表示#ff0000

     ff相当于最大255

     语法

     #红绿蓝

默认字体是16px

        Font-size设置的不是文字本身的大小，而是格的高度

通过font-family可以指定文字的的字体

      可同时指定多个字体，用，隔开浏览器优先使用前边的字体

行高设置line-height

行间距=行高-字体大小

对于单行文本，可以设置行高与父元素的高度一致

在font中也可以设置如font ：30px/80px “微软雅黑”

      80px为行高

Text-transform设置文本的大小写

Text-décoraction属性能用来设置文本的修饰

词之间空格的大小work-space

Letter-space可以指定字符之间的间距

文本对齐text-align

默认值left

Right靠右

居中center

两端对齐 justify 通过调整文本之间空格大小来达成目的

Text-indent缩进对首行