前端 html css属性

---

css之文本属性

font-size   # 字体大小    单位是px 浏览器默认是16px   设计图常用字号是12px

font-family    # 字体    当字体是中文字体、英文字体中有空格时，需要加引号；多个字体中间用逗号链接，先解析第1个字体，如果没有，则解析第2个字体，以此类推

color    # 颜色      color：red；   color:#ff0;   color:rgb(255,0,0); 0-255

font-weight     # 加粗 font-weight:bolder(更粗的)、bold(加粗)、normal(常规)、font-weight:100-900;       100-500不加粗   600-900加粗

font-style   # 倾斜   font-style:italic(倾斜字体)、oblique(倾斜的文字)、normal(常规显示)

text-align   # 文字水平对齐     text-align:left;    水平靠左      text-align:right;   水平靠右        text-align:center;   水平居中          text-align:justify;  水平两端对齐  但是只对多行起作用
line-height       # 行高            line-height的数据=height的数据，可以实现单行文本垂直居中
text-indent        #  首行缩进      text-indent 可以取负值，    text-indent属性只对第一行起作用   2em  不管字体大小，都是空出两个字体
letter-spacing       # 字间距   控制文字和文字之间的间距
text-decoration       #  文本修饰      none（没有）、 underline（下划线）、overline（上划线）、line-through（删除线）
font               # 文字简写         fout-style   font-weight    font-size   line-height  fout-family         fout:italic    顺序不能变，必须同时指定fontsize和font-family属性时才起作用

---

背景图片

background-size:  图片大小    例如 background-size: 20px 20px     可以是百分比   cover 完全覆盖、contain  宽高放大至当前盒子最大
background-color: 背景颜色;
background-image: 背景图片;    例如 background-image: url();
background-repeat: 背景图片的平铺;     background-repeat: no-repeat(不平铺)、repeat(默认平铺)、repeat-x(x轴平铺)、repeat-y(y轴平铺)
background-position: 背景图片定位;     background-position: 水平位置   锤子位置  可以给负值
background-attachment: 背景图片的固定;   background-attachment: scroll(滚动)、fixed(固定,固定在浏览器的窗口里面)

---

浮动

浮动
float:right;    右浮动。
float: left;    左浮动
float: none;    不浮动

第一种 清浮动
直接写死，让前元素的宽高等于现元素，不常用

第二种 在现元素中使用
clear: left;   清除左浮动
clear: right;  清除右浮动
clear: none;   不清除浮动
clear: both;   清除前面所有浮动

第三种 在已经使用浮动的父元素中使用空盒子，然后  style="clear:both"
第四中 在父元素中使用 overflow: hidden style="overflow: hidden;"

---

盒子模型——padding属性

padding: 10px;       一个值   四个方向都是10px
padding: 10px 20px       两个值    上下10px    左右20px
padding: 10px   20px  30px         三个值   上10px    左右20px     下30px
padding:  10px 20px 30px 40px      四个值   逆时针    上  右  下 左 

---

盒子模型——边框属性（border）

border: 1px  solid red        边框大小为1px       solid(实线)        红色

border:支持属性    样式>>>   solid(实线)     double(双实线)      dashed(虚线)    dotted(点状线)

可拆分成
border-width:    可设置4个值     逆时针    上  右  下 左
border-color:     可设置4个值     逆时针    上  右  下 左
border-style:     可设置4个值     逆时针    上  右  下 左


盒子特性
上下盒子外边距会取最大的一个值
左右盒子会相互叠加


外边距会作用在父盒子身上
    解决办法：
        1、子盒子margin-top ==> 父盒子的padding-top    ,将子盒子的外边距转换成父盒子的内边距，注意高度计算
        2、给父盒子设置边框  border
        3、添加浮动效果，子盒子或者父盒子都可以
        4、overflow: hidden.    BFC构建

---