CSS总结

大家好，我是讯享网，很高兴认识大家。

css基础知识
CSS：
层叠样式表 Cascading Style Sheet
学习CSS就是学习一堆的选择器和属性。

CSS版本：
CSS2.0 CSS3.0 现在学习是CSS2.0
问：CSS3.0比CSS2.0多了什么？
答：就是多了一些选择器和属性。

盒子模型6大属性：
1）内容区域 width height
2）内填充区域 padding
3）边框 border
4）外填充区域 margin
5）背景也可以给img添加背景图片

块级元素并排显示：
1）浮动
2）flex
3）定位
4）行内块

C2中的属性：
布局：
盒子模型设置
浮动设置
定位设置
美化：
字体设置
文本设置
列表设置
表格设置

背景属性
背景颜色的添加:
```
 background:red; backgronnd-color:red; 
```
讯享网

背景图片的添加：

讯享网 background:url(“images/1.jpg”); backgronnd-image:url(“images/1.jpg”);

背景的平铺
什么是平铺？平铺就是图片是否重复出现
1.不平铺：background-repeat:no-repeat;
2.水平方向平铺：background-repeat:repeat-x;
3.垂直方向平铺：background-repeat:repeat-y;
4.完全平铺：默认为完全平铺
背景图片的定位
背景图片的定位就是可以设置显示背景图片的位置，通过属性 background-position来实现
固定，不随内容的`滚动而滚动

background-attachment:fixed;

background-attachment:scroll; 滚动，随内容的滚动而滚动

文字文本属性
css文字文本属性：

文字属性

color:red; 文字颜色
font-size:12px; 文字大小
font-weight:“bold” 文字粗细(bold/normal)
font-family:“宋体” 文字字体
font-variant:small-caps小写字母以大写字母显示
文本属性

text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进

讯享网text-decoration:none;

文本线(none/underline/overline/line-through)
letter-spacing: 字间距

盒子模型
盒子模型就是一个有高度和宽度的矩形区域
所有html标签都是盒子模型
div标签自定义盒子模型
所有的标签都是盒子模型

盒子模型组成部分：
自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin外边距
内容+内边距+边框+外边距=面积
border 边框

常见写法 border:1px solid #f00;
单独属性：

border-width: border-style: dotted 点状虚线 dashed（虚线） solid（实线） double（双实线） border-color (颜色) padding 内边距

值：像素/厘米等长度单位、百分比

讯享网padding:10px; 上下左右 padding:10px 10px; 上下 左右 padding:10px 10px 10px; 上 左右 下 padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）

单独属性：

padding-top: padding-right: padding-bottom: padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

讯享网

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
5. 块元素、行元素与溢出
基本概念
块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；
行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距
行块转换

display:none; 不显示
display:block; 变成块级元素
display:inline; 变成行级元素
display:inline-block; 以块级元素样式展示，以行级元素样式排列
溢出

overflow:hidden; 溢出隐藏
overflow:scroll; 内容会被修剪，浏览器会显示滚动条
overflow:auto; 如果内容被修剪，则产生滚动条
常见的块状元素

讯享网div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表 address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表

常见的内联元素

讯享网a – 锚点 b – 粗体 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 label – 表格标签 q – 短引用 select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strong – 粗体强调 textarea – 多行文本输入框 u – 下划线

行内元素与块级元素有什么不同

区别一：

块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：

块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：

块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right;
padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四：

块级：display:block;
行内：display:inline;
替换元素有如下：（和img一样的设置方法）

<img>. <input>、<textarea>、<select> <object>

都是替换元素，这些元素都没有实际的内容
可以通过修改display属性来切换块级元素和行内元素
总结：一切皆为框

6. 定位
static静态定位（不对它的位置进行改变，在哪里就在那里）
默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）。

fixed固定定位（参照物–浏览器窗口）—做弹窗广告用到
生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。

relative（相对定位）（参照物以他本身）
生成相对定位的元素，相对于其正常位置进行定位。

absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)

相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
.adv_relative { position: relative; left: 30px; top: 20px; }

绝对定位：
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

CSS浮动
浮动：
浮动的初衷：为了实现新闻的字围效果。
浮动的元素半脱离标准文档流：
出国了浮动刚开始就为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫字围效果。
现在我们基本上利用浮动并不是为了实现字围效果，我们主要使用浮动来让块级元素并排显示。
浮动的特点：

讯享网0，浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。 1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排 2，浮动并没有完全地脱离了标准文档流（破坏性—>flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。 3，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。 4，如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。 5，如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。 6，如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden） 7，如果元素浮动了，它也会造成对后面的兄弟元素影响。 8，应用：实现左右布局 小导航 多个规则盒子水平排列（行内块） 9，当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性， 10，如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。 11，如果父元素也浮动了，那么就不会出现高度塌陷了。 12，如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面 13，浮动元素会从标准文档流中半脱离出来。证明：字围 14，一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

如何清除浮动
方法一
直接设置父元素的高度，必须要知道父元素高度是多少
方法二
在父元素中，追加空子元素，并设置其clear属性为both，clear是css中专用于清除浮动的属性
clear 取值：
1、none：默认值，不做任何清除浮动的操作
2、left：清除前面元素左浮动带来的影响
3、right：清除前面元素右浮动带来的影响
4、both：清除前面元素所有浮动带来的影响
方法三
设置父元素浮动
方法四
为父元素设置overflow属性，取值：hidden 或 auto
方法五
父元素设置display:table

CSS总结

CSS总结

相关推荐