（day44）css样式、css布局

目录

• 一、css样式
  • （一）文字样式
    • （1）文字字体font-family
    • （2）字体大小font-size
    • （3）字体粗细font-weight
    • （4）字体颜色color
  • （二）文本样式
    • （1）文字对齐text-align
    • （2）文字装饰text-decoration
    • （3）首行缩进text-indent
  • （三）背景样式
    • （1）背景颜色color
    • （2）背景图片image
    • （3）背景重复repeat
    • （4）背景位置position
  • （四）显示样式
    • （1）边框border
    • （2）宽高
    • （3）display属性
• 二、css布局
  • （一）盒子模型
    • （1）外边距margin
    • （2）边框border
    • （3）内边距padding
    • （4）内容content
  • （二）浮动float
    • （1）三种取值
    • （2）clear
    • （3）overflow溢出属性
    • （4）清楚浮动
  • （三）定位position
  • （四）是否脱离文档流
  • （五）z-index
  • （六）opacity

一、css样式

（一）文字样式

（1）文字字体font-family

font-family可以放置多个字体，如果浏览器不支持第一个字体，则会尝试下一个

body {
    font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

（2）字体大小font-size

如果设置成inherit表示继承父元素的字体大小值，默认16px

p {font-size:14px;}

（3）字体粗细font-weight

1. normal：默认值，标准粗细
2. bold：粗体
3. bolder：更粗
4. lighter：更细
5. 100~900：具体粗细，nomal是400、bold是700
6. inherit：继承父元素字体的粗细值

（4）字体颜色color

1. 十六进制：#FF0000
2. RGB：RGB(255,0,0)
3. 颜色：red
4. rgba（255,0,0,0.3）第四个值是alpha，指定色彩的透明度，范围在0~1.0

（二）文本样式

（1）文字对齐text-align

1. left：左边对齐、默认值
2. right：右对齐
3. center：居中对齐
4. justify：两端对齐

（2）文字装饰text-decoration

1. none：默认值，用来清除a连接中的下划线
2. undeline：下划线
3. overline：上划线
4. line_through：删除线
5. inherit：继承父元素

（3）首行缩进text-indent

/*字体大小为16px时，设置为32px*/
p {text-indent:32px}

（三）背景样式

（1）背景颜色color

div {background-color:red;}

（2）背景图片image

url可以使本地相对路径，也可以是图片网络地址

body {background-image:url("1.jpg")}

（3）背景重复repeat

1. repeat：默认平铺
2. repeat-x：水平方向平铺
3. repeat-y：垂直方向平铺
4. no-repeat：不平铺

body {background-repeat:repeat;}

（4）背景位置position

/*body {background-position:x轴 y轴;}*/
body {background-position:left top;}

body {background-position:200px 200px;}

/*中心位置*/
body {background-position:center center;}

body {background-position-x:200px;}

body {background-position-y:200px;}

支持简写：

body {background:#336699 url('1.png') no-repeat left top;}

应用场景： 很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

（四）显示样式

（1）边框border

• border-style 边框样式

  1. none：无边框
  2. dotted：点状虚线边框
  3. dashed：矩形虚线边框
  4. solid：实线边框

• border-radius画圆

  实现圆角边框的效果

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

/*border : 边框宽度 边框样式 边框颜色*/
#i1 { border-top: 2px solid red;}
#i1 { border-bottom: 2px solid red;}
#i1 { border-left: 2px solid red;}
#i1 { border-right: 2px solid red;}

/*简写，不写上下左右默认*/
#i1 {border: 2px solid red;}

（2）宽高

只有块级标签可以设置长宽，行内标签设置了没有任何作用（只会取决于内部文本值）

1. width：宽度
2. height：高度

（3）display属性

控制html元素的显示效果

1. none：浏览器中不显示
   • 和visibility:hidden的区别
     1. display的隐藏元素后，不会占用空间
     2. visibility的仍会占用空间，会影响布局
2. block：默认值，按块级元素显示
3. inline：按行内元素显示
4. inline-block：使元素同时具有行内和块级元素

二、css布局

（一）盒子模型

（1）外边距margin

边框和其他盒子边框的距离，值为“0 auto”时代表居中

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

/*简写*/
.margin-test {
  margin: 5px 10px 15px 20px;
}

/*常见居中*/
.mycenter {
  margin: 0 auto;
}

简写情况下不同参数的顺序：

1. 一个参数：控制上下左右
2. 两个参数：分别控制上下、左右
3. 三个参数：分别控制上、左右、下
4. 四个参数：按照顺时针分别控制上、右、下、左

（2）边框border

（3）内边距padding

内容和边框之间的距离，用法同magin一样

（4）内容content

盒子内的内容

（二）浮动float

1. 在 CSS 中，任何元素都可以浮动
2. 浮动的元素 是脱离正常文档流的(原来的位置会让出来)
3. 浏览器会优先展示文本内容

（1）三种取值

1. left：向左浮动
2. right：向右浮动
3. none：默认值，不浮动

（2）clear

规定元素的哪一侧不允许其他浮动元素

1. left：左侧不允许浮动元素
2. right：右侧不允许浮动元素
3. both：左右两侧都不允许浮动元素
4. none：默认值，允许出现浮动元素
5. inherit：规定从父元素继承clear的值

（3）overflow溢出属性

1. visible：默认值，会溢出
2. hidden：溢出内容会被隐藏
3. scroll：溢出内容会被压缩，可以拖动上下左右滚动条查看
4. auto：溢出内容会被压缩，可以拖动上下滚动条查看
5. inherit：从父元素继承overflow属性值

（4）清楚浮动

清除浮动的影响（父标签塌陷问题）

1. 固定高度

2. overflow:hidden

3. 伪元素清除法

   .clearfix:after {
     content: "";
     display: block;
     clear: both;
   }

（三）定位position

1. static：默认值，静态的，未定位的
2. relative：相对定位，以自己原始位置为参照物移动，不脱离文档流，仍占据文档流空间
3. absolute：绝对定位，以已经定位过的父标签为参照物移动，会脱离文档流
4. fixed：固定定位，以浏览器窗口为参照物，固定在某个位置不动，会脱离文档流

（四）是否脱离文档流

脱离文档流，是指不会占据原来的文档空间

1. 脱离文档流：绝对定位和固定定位
2. 不脱离文档流：相对定位

（五）z-index

设置层叠顺序

1. 哪个大哪个就在最上层
2. 只有定位了元素，才有能z-index，即浮动元素不能是有z-index
3. 从父现象：父亲怂了，儿子再牛逼也不行

（六）opacity

1. 定义透明效果，范围是0~1,
2. opacity会对标签里所有的进行透明化，rgba只会对字体透明化