CSS基础

最新推荐文章于 2022-11-30 21:37:28 发布

FeiWang628

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/FeiWang628/article/details/82353748

版权

一. float(对块级、行内、内联块元素的影响)，如何清除浮动

元素在一行显示

浮动让元素脱离文档流，按照浮动方向移动，遇到父级边界或者相邻浮动元素停住
inline_block 支持宽高，但会解析换行符，需去除间隔

浮动带来的问题

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非同级元素（内联元素）会跟随其后
若非第一个元素浮动，该元素之前的元素都需浮动，否则会影响页面结构**

去除inline_block间隔

去掉换行符（不推荐）
margin为负值
设置字间距为-npx
设置字体大小为0

去除浮动

为父元素直接设置宽高（子元素高度超过父元素会造成高度崩塌）
overflow：hidden 隐藏/scroll 滚动条/auto，hidden可以清除浮动但又有可能隐藏有用的东西（不推荐）
style：“clear:both”; 但会加入空标签（不推荐）
clearfix 方法

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}

二. position(五种属性，以及每个属性的特点)

relative: 相对定位，相对于正常位置定位
absolute：绝对定位，相对于默认定位以外的第一个父元素定位
fixed：固定定位，相对于浏览器窗口定位
static：默认，元素出现在正常的文档流中
inherit：规定元素从父元素上继承position的属性值

三. 选择器的分类及优先级

选择符分类

id选择器：id=“name”
类选择器：class=“head”
标签选择器：body,div,p,ul,li
全局选择器：*号
相邻兄弟选择器：div+p
子选择器：div>p
群组选择器：.class,#id
组合选择器：.head .header(有两个类名)
包含选择器：#id .class
继承选择器：div p
后代选择器：name .nav ul li
伪类选择器：链接样式，a元素的伪类，四种状态，link,visited,active,hover

优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS3新增选择器

参考网址 CSS选择器

四. display（不可继承）的常见属性，以及每种属性的特点

inline：默认为内联元素
inheir：继承父级元素的属性值
inline-block：内联块元素
block：块级元素，元素前后有换行符
none：不显示元素

参考网址 display相关属性

五. 常见居中方式（定宽，不定宽，inline，inline-block，block）

目前包括水平居中、垂直居中、水平垂直居中

六. BFC，IFC理解

BFC（Block Formatting Context）块级格式化上下文

定义

BFC只是一个独立的渲染区域，决定了元素如何对内容进行定位，以及和其他元素的关系和相互作用。
BFC是一个作用范围，在布局上不会影响其他元素

产生机制

根元素
float的属性部位none（浮动元素）
position为absolute和fixed（绝对定位元素）
overflow不为visible
display为inline-block、table-cell、flex、inline-flex、 table-caption（非块级盒子中的块级容器）

布局规则

内容的盒子在垂直方向，放置
盒子的垂直方向的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠；
每个元素的左外边与包含块的左边相接触，浮动元素也是如此；
BFC区域不会与float元素重叠；
BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面元素；
计算BFC高度时，浮动元素也计算

作用

包含浮动元素
- 高度崩塌问题：通常情况下，父元素的高度会被子元素撑开，子元素为浮动元素，所以父元素高度崩塌，上下边界重合，用bfc清除浮动
不被浮动元素覆盖
- div浮动遮盖问题：由于左侧元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层，就会发生遮挡问题
- 由于ie的原因需要再加一个解发hasLayout的zoom:1
阻止外边距重叠
- margin塌陷问题：在标准文档流中，块级标签之间的竖直方向margin会以大的为准

- 可使用overflow:hidden产生bfc解决
Layout 与css bug有关
- 是IE浏览器渲染引擎的内部组成部分，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖父元素计算，渲染引擎采用hasLayout属性（判断是否有layout），值为true时，元素有布局（layout）

IFC（inline Formatting Context）行内格式化上下文

定义

能把在一行上的框都包含进去的一个矩形区域，称为行框
IFC对外表现为块级元素，与DIV垂直排列

布局规则

框一个接一个水平排列，起点是包含块的顶部
水平方向的margin、border和padding在框之间得到保留，在垂直方向上会以不同形式来对齐，它们可能会把底部或顶部对齐，也可能把内部的文本基线对齐，不能指定宽高
行宽的宽度是由包含块和存在的浮动来决定，行框的高度由行高来计算

主要影响IFC内布局的css

font-size：用来指定文本类型节点的大小
line-height：为内联元素的行盒模型指定有一个最低高度
height
vertical-aligin：由多个内联元素生成的盒模型组成的行内盒模型的垂直定位

容器的高度 height = line-height + vertical-align

作用

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

CSS3新增

GFC (Gridlayout Formatting Contexts) 网格布局格式化上下文

display为grid,在网格容器定义网格行和网格列
相比table，有更加丰富的属性来控制行列和对齐

FFC （Flex Formatting Contexts）自适应格式化上下文

display 为flex（渲染为块级元素）或inline-flex（渲染为行内元素）可以得到一个伸缩容器
每个子元素都是一个伸缩项目Flexbox定义了伸缩容器内伸缩项目该如何布局

参考网址格式化上下文理解浅谈BFC及其作用 hasLayout 介绍

七. 两栏布局，三栏布局（圣杯布局、双飞翼布局）

两栏布局

布局如下所示：

<div id="content">
	<div class="left">
</div>
	<div class="right"></div>
</div>

方法一：margin实现布局（一侧宽度固定，一侧自适应）

#content{
	background-color: #ccc;
}
.left{
	width: 100px;
	height: 800px;
	backgroundColor: red;
	float: left;
}
.right{	
	height: 800px;
	margin-left: 100px;
}

方法二：利用定位来设置

.left{
	width: 100px;
	height: 800px;
	background-color: red;
		
}
.right{
	height: 800px;
	background-color: green;
	position: absolute;
	left: 100px;
}

方法三：使用flex布局

.left{
	width: 100px;
	height: 800px;
	background-color: red;
	
		
}
.right{
	height: 800px;
	background-color: green;
	flex: 1;
		
}

圣杯布局（两边固宽，中间自适应）

布局如下所示：

<div class="main"></div>
<div class="left"></div>
<div class="right"></div>

CSS代码

body,html{
	height: 100%;
	padding: 0;
	margin: 0;
}
body{
	background-color: #ccc;
	padding-left: 100px;
	padding-right: 200px;
		
}
.main{
	float: left;
	width:100%;
	height: 100%;
	background-color: red;
	
}
.left{
	width: 100px;
	height: 100%;	
	float: left;
	background-color: green;
	margin-left: -100%;
	position: relative;
	left: -100px;
}
.right{
	float: left;
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin-left: -200px;
	position: relative;
	right: -200px;
	
}

双飞翼布局

与圣杯布局的区别是：圣杯布局用padding给左右元素留位置，而双飞翼是给中间元素设置子元素，用margin留位置,不用给左右元素定位

修改布局：

<div class="main">
	<div class="inner"></div>
</div>

CSS:

.inner{
	margin-left:100px;
	margin-right:200px;
}

浮动和定位也可实现三栏布局

八. 如何隐藏一个元素

display：none ；( 不占位置)
visibility：none; (占位置)
margin负值
opacity：1;（透明度 css3）
拿一个白色div盖住
定位 position left,top
width/height

九. 自适应布局

自适应的目的是在不同分辨率的不同设备上面显示相同的页面
“一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小

响应式布局

响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局的一些技术点纪录：
允许网页的宽度自动的调整
尽量少使用绝对的宽度，多点百分比
相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem
流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

选择加载css，屏幕宽度小于400像素，就加载文件

 ```
 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
 
 ```

十. CSS实现多种图案

轮播图
布局

<div class="container">
    <div class="photo">
        <img src="img/love.jpg" />
        <img src="img/xin.jpg" />
        <img src="img/pink.jpg" />
        <img src="img/nong.jpg" />
        <ul id="dis">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
        </ul>
    </div>
</div>

css

.container{
	width: 300px;
	height: 600px; 	
	overflow: hidden;
	position: relative;
}
.photo{
	width: 1200px;
	height: 600px; 	
	position:absolute;
	left:0;
	animation-name:autoplay;
	animation-duration: 12s;
	
}
.photo img{
	float: left;
	width: 300px;
	height: 600px;
	}
@keyFrames autoplay{
	0%,25%{
		left: 0;
		}
	30%,55%{
		left: -300px;
		}
	60%,85%{
		left: -600px;
		}
	90%,100%{
		left: -900px;
		}

	}
#dis{
	position:absolute;
	left:-50px;
	top:-10px;
	opacity:.5
	}
#dis li {
	display:inline-block;
	width:200px;
	height:20px;
	margin:0 50px;
	float:left;
	text-align:center;
	color:#fff;
	border-radius:10px;
	background:#000
}

参考网址纯CSS绘制各种图形

十一. CSS3新特性（主要CSS3动画）
参考网址 CSS新特性