11月3日学习内容整理：CSS的属性操作（渲染效果），

一、文本颜色

》》》改变字体颜色：

color  ：#十六进制数或者颜色对应的英文

》》》调色：

color ：rbg（34，21，23） r代表红色  b代表黑色  g代表绿色，括号里的数字代表比例，最大255

》》》背景色：

background-color：颜色对应的或者#十六进制数   文本的背景颜色，块级的话就是整一行都被染色，内联的话就只有内容所占部分被染色

 

二、文本对齐方式

》》》text-align ：left   水平居左，默认值，由浏览器决定

》》》text-align ：right  水平居右

》》》text-align ：center  水平居中

》》》text-align ：justify   两端对齐

 

三、字体格式

》》》字体大小：font-size ：10px  

》》》去除标签自带的属性效果，比如超链接标签的下划线：text-decoration:none

》》》调整字体粗细：font-weight ：300

》》》斜体：font-style：italic  

最重要的：：：：：

》》》行高：用来设置垂直居中  line-height: 200px  这个值必须和height值一样

原理：一行变高了以后，文本所在的位置也会随之变化，就会从水平居中变为垂直居中

 

三、边框属性

border：宽度 样式 颜色  可以这样简写设置

 

四、内边距和外边距属性

》》》》内边距和外边距和边框和文本的关系：也就是盒子模型

• margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding:           用于控制内容与边框之间的距离；   
• Border(边框):     围绕在内边距和内容外的边框。
• Content(内容):   盒子的内容，显示文本和图像。

 

》》》》margin外边距

（1）四个方向：上top  下bottom   左left    右right

（2）顺序问题：

margin：10px 20px 30px    上  左右  下

margin：10px 20px   上下  左右

margin：10px 20px 30px 40px   顺时针  上  右   下  左

（3）margin的居中效果：

margin：0  auto   0就代表上下，auto代表左右时就是居中

 

》》》》padding内边距

（1）也有四个方向：和外边距一样

 

五、float属性

（1）作用：用来让div标签并行显示

（2）含义：

》》》float：left   往左漂浮

》》》float：right  往右漂浮

注意漂浮的含义：就是浮起来了，脱离文本框，在文本框的上方

（3）浮动元素的摆放位置：取决于它上一个元素是否是浮动元素

》》若不是浮动元素：则保持垂直距离保持不变，就是换下一行放

》》若是浮动元素：就紧挨着，左漂浮就左边紧挨着上一个元素，右漂浮就右边紧挨着上一个元素