CSS学习笔记【3】

上集：CSS学习笔记【1】
上集：CSS学习笔记【2】

CSS

3 CSS布局

3.5 内边距 padding

  1. padding:10px
  • 给四个方向全部添加了10px内边距
  1. 给一个方向单独设置
	padding-top  
	padding-right  
	padding-bottom  
	padding-left

4 背景

background

  1. 背景颜色: red
  2. 背景图片: url() ()里面写图片路径
    注：图片作为内容可以撑起元素的高,作为背景则不可以
  3. 背景图片平铺:
    • repeat 默认值 图片会重复出现直到铺满元素
    • no-repeat 图片只出现一次
    • repeat-x / repeat-y 横向重复/纵向重复
  4. 背景图片定位:与no-repeat 一起使用
    • 关键字定位
  •   - 横向 left/center/right
  - 纵向 top/center/bottom
    • 数字定位
  •   - 横向npx  

  •   - 纵向 npx
  - n为正数 横向向右 纵向向下
  - n为负数 横向向左 纵向向上
    • 百分比定位
  •   - 横向10%:向右挪到元素宽的10%

  •   - 纵向10%:向下挪到元素高的10%
  1. 背景图片大小
  • background-size:必须单独设置 规律和img宽高一样

5 文本

  • font-size 字体大小 默认值是16px
  • font-family 字体
  • font-weight 字体粗细 默认值是normal
    ·bold 一般粗
    ·bolder 更粗 有时不好用
    ·lighter 细
  • font-style 斜体 默认值是normal
    ·italic 斜体
  • color 字体颜色 默认是黑色
  • 【注】边框没有设置颜色时，也会受color影响
  • text-align 水平对齐方式 默认值是left （center/right）
  • line-height 行高 一行文字的高度 文字这这个范围内上下居中
    让一行文字在元素内上下居中---把行高设置成元素的高度
    让多行文字在元素内上下居中---
    【练习】让行高为30px的两行字，在300px高度的div内上下居中
    30*2=60
    300-60=240
    240/2=120

6 浮动

6.1 浮动定义

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

6.2 使用浮动

  • float
    ·left 左浮动
    ·right 右浮动
    ·none 默认值 不浮动

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

  • 如果图像是右浮动，下面的文本流将环绕在它左边：

img
{
    float:right;
}

6.3 浮动的作用

  1. 作用1.让块元素在一行内显示
  2. 作用2.块元素在没有设置宽度的时候，浮动后，宽度由内容决定
  3. 作用3.行内元素在浮动之后，设置宽高有效

6.4 清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：

.text_line
{
    clear:both;
}

6.5 嵌套关系的浮动

【实例】
	out{
		background: #ADFF2F;
	}
	.in{
		width: 200px;
		height: 200px;
		background: red;
		float: left;
	}

【问题】高度坍塌
参考1
参考2

  • 描述
    父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度坍塌

  • 解决办法原理
    根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
    简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
    当开启元素的BFC以后，元素将会具有如下的特性：
    　　1.父元素的垂直外边距不会和子元素重叠
    　　2.开启BFC的元素不会被浮动元素所覆盖
    　　3.开启BFC的元素可以包含浮动的子元素

  • 如何开启元素的BFC
    　　1. 设置元素浮动(不推荐)
    　　　　- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
    　　2. 设置元素绝对定位(不推荐)
    　　3. 设置元素为inline-block(不推荐)
    　　- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
    　　4. 将元素的overflow设置为一个非visible的值（aotu hidden）

  • 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
    overflow: hidden;

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做`hasLayout
该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多，
我们直接使用一种副作用最小的:直接将元素的zoom设置为1即可。

  • zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍

  • zoom:1表示不放大元素，但是通过该样式可以开启hasLayout

  • zoom这个样式，只在IE中支持，其他浏览器都不支持。

  • 解决方法
    【错误写法】我们可以将父元素的高度写死，以避免塌陷的问题出现，
    但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

  1. w3c推荐做法，在浮动元素末尾添加一个空标签，在空标签里添加 sytle = "clear:both"

优点：通俗易懂，书写方便
缺点：添加无意义标签，结构化差

  1. 给父元素添加 overflow:hidden|auto|scroll

优点：代码整洁，无需添加无意义标签
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示溢出的元素

  1. 为父元素增加伪元素 :after 方式（推荐使用）
	.clearfix:after{
		content:"";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	.clearfix{*zoom:1;} /*ie67专有清除浮动属性浏览器兼容*/

优点：符合闭合浮动的思想 结构语义化正确
缺点：由于IE6-7不支持 :after , 使用zoom：1 触发hasLayout

  1. 使用双伪元素清除浮动（推荐使用）
	.clearfix:before,clearfix:after{
		content:"";
		display:table;
	}
	.clearfix:after{
		clear:both;
	}

优点：代码更简洁
缺点：由于IE6-7不支持 :after , 使用zoom：1 触发hasLayout

posted @ 2021-06-24 19:31  Teddyonthebench  阅读(66)  评论(0)    收藏  举报