WEB零基础开发-代码入门

一、      边框

1、        组成：粗细、样式、颜色

2、        方向：top、right、bottom、left

3、        特征：形状是非矩形

4、        边框三角形：  div{

width: 0;

                  height: 0;

                  border: 10px solid #fff;

                  border-top-color:#ccc;

}

二、      背景

1、        内容是会撑开容器的宽高；背景不会占用容器的宽高

2、        background-attachment 背景图是否滚动；

fixed：固定在浏览器可视区域；

scroll：跟随滚动条滚动；

3、        background 复合样式不分属性书写顺序的

三、      文字文本

1、        font-weight:bold/normal;文字加粗

font-style:italic/normal;文字倾斜

font-size:文字大小

2、        font复合样式需要注意书写顺序！

3、        text-align:left/center/right;文本对齐方式

text-decoration:underline/none;文本修饰

letter-spacing:字母间距（中文是一个字与一个字之间的间距，英文是一个字母与一个字母之间的间距）

4、        word-spacing:单词间距（以空格为解析单位）中文是每个字之间要有空格，英文是每个单词之间有空格

5、        white-space:nowrap/normal;强制不换行（就算文字超出了所设置的宽度，它也不会换行）

6、        测量文字大小的时候，最好是使用从上到下的方式去测量文字的大小

7、        空格的大小：字体格式为宋体时，空格的大小是当前文字大小的一半（字体格式不一样时，空格大小也不一样）

8、        text-indent:2em;缩进两个字体大小

em是根据字体大小来进行计算的；

1em = 当前字体大小

四、      盒模型

1、        padding：内填充；设置padding后会撑大容器的大小

2、        margin：外边距；元素与元素之间的距离

3、        margin的两个问题：

margin-top传递（当给子元素设置margin-top的值时，当子元素上面没有别的同级元素时，会将margin-top的值传递给父元素）；解决方法：给子元素设置边框

margin上下叠压（上下两个元素分别设置了margin-bottom和margin-top值）；解决技巧：还是使用margin，可以将某一个元素方向设置成预想的值，margin叠压会取最大的margin值；如果元素没有特许特征，也可以用padding代替

4、盒模型大小：border+paddig+width/height（border和padding要包括左和右/上和下）