CSS入门

CSS

div+css目前比较主流的布局方式，相比table布局更加灵活 div标签：（区域标签）标准的块级元素 只有块级元素的所有特点，没有其它特性，方便自行添加 span标签：（范围标签）标准的行级元素 只有行级元素的所有特点，没有其它特性，方便自行添加

面试题：块级元素和行级元素的区别？ a.块级元素：自上而下，独占一行。可以设置宽度和高度，块级元素里面可以放行级元素也可以放块级元素。 b.行级元素：从左到右，不会独占一行。无法设置宽度和高度，它的高度是里面存放的文本或图片的宽高决定的。行级元素只能放行级元素，无法放块级元素。行级元素只有左右的边距，没有上下的边距。 c.常用的块级：div h1-h6 hr p ul li d.常用的行级：span a strong em img b

行级和块级元素如何转换 在css中添加一个样式： display:block; 转换成块级 display:inline; 转换成行级 display:inline-block; 转换成具有行级和块级的元素 display:none; 让元素隐藏起来

1 什么是css

层叠样式表，可以对页面的元素（标签）化妆，比如：设置字体的大小，颜色，边框，背景...

使用css三种方式（和使用js一模一样） 1.内部样式：编写在html页面中的 head标签内添加style标签 编写小型页面

<style></style>

2.外部样式：独立编写css文件，head标签内添加<link/>引入css文件，适合编写大型页面 <link rel="stylesheet" href="地址"/> 3.行内样式：就是在标签内部添加一个style属性，如果有的元素设置内部，也设置了外部样式，但是我只想修改这一个元素的样式 添加行内样式 优先级：行内样式>内部样式>外部样式 <span style=""></span>

2 css基本语法

注释：/**/ 选择器{ 属性名：属性值； 属性2：属性值； ... }

选择器

选择器：通过某种规则(id class 标签)去选择页面的元素 1.基本选择器：id选择器 类选择器 标签选择器 全局选择器 比如： #id的名字 .类名 标签名 * 注：id是唯一的，class是类名可以重复 2.交集选择器：一般来说会有两部分构成，用来选取两个部分相交的内容，第一个部分一定是标签选择器，第二部分可以是类选择器可以是id选择器 比如： div div class="c1" span class="c1" div.c1{}(中间无空格) 3.并集选择器：同时选取多种不同的元素 符号是逗号 比如：同时选取了div和id=d1和class=c1和li元素 div,#d1,.c1,li{} 4.后代选择器：通过空格相连的，获取所有的后代元素 比如：获取div中的所有后代元素span div span{} 5.子代选择器：通过>相连，获取子代元素 比如：获取div中class="c1"子元素 div>.c1{} 6.伪列选择器： 选择器:hover 鼠标悬浮在指定的元素上触发的内容 a:visited 链接被访问后的状态 a:link 链接未被访问后的状态 a:active 链接被鼠标按下未释放的状态

---

CSS属性介绍

1.设置宽度 高度 颜色 width：宽度 height：高度 color：颜色 2.字体样式 font-size：字体大小 font-weight:字体粗细 font-style:italic;斜体

3.文本样式 text-indent：文本缩进（可以写px像素 也可以写em表示每个字的距离） line-height：行高 是一行数据的高度，当只有一行数据时，如果行高和高度一样 一般会垂直居中对齐 text-decoration：控制文本下划线 none去掉 text-align：文本水平对齐方式 left center right

4.背景样式 background-color：背景颜色 background-image；背景图片 background-repeat:平铺方式 background-position：背景定位方式 vertical-align: middle;图片与文字对齐

overflow: hidden;背景超出部分隐藏

3 盒子模型 浮动 定位

盒子模型：在html中，任何元素都可以称之为一个盒子 一个盒子主要包含：元素的内容，元素的内边距，元素边框，元素外边距 计算一个元素占的宽度=元素内容+2个边框+2个内边距+2个外边距

1、内边距：元素的内容和自己边框的距离 padding padding: 10px; 设置四种内边距 都是10px padding: 10px 2px; 设置上下是10px 左右20px padding:10px 20px 30px 40px; 按照顺时针的顺序 上 右 下 左 padding-left:10px; 单独设置左边的内边距

2、外边距：自己边框和其他元素的距离 margin 外边距的语法和padding一模一样

注：行级元素外边距只有左右 没有上下

margin可以实现利用外边距居中 前提必须设置宽度

上下的坐标无所谓 auto左右的外边距自动相等

比如：div{

width: 616px;

margin: 0 auto;

}

3、边框：border 语法规则：包含 边框颜色 边框大小 边框类型 边框类型：默认是不设置的 实线(solid) 虚线(dashed dotted) 双实线(double)... 边框颜色：默认是黑色，可以省略不写 边框大小：默认是0px border:大小 类型 颜色 比如：border:1px solid red;

边框也可以分成四种情况 border-top: -bottom -left -right

---

标准文档流：指的是元素排版布局过程中，元素会默认从左往右进行布局，从上至下布局，如果前面的内容发生了修改，后面的内容也会随着改变 html语言就是一个标准文档流格式。 特点： 1.空白折叠：无论写多少空格或者换行，最终显示只有一个空格 2.底部对齐：当排列在一行的元素，高度不一致的时候，会根据底部对齐 3.自动换行：当一行数据展示不下的时候，会自动排列到下一行

总结：文档流存在这些默认特点，如果要布局想要的内容，按照正常文档流，很难完成。所以后面要对页面元素进行移民（脱离文档流）

一、脱离文档流：

a.给元素添加浮动 float

b.使用绝对定位 poisition:absolute

c.固定定位 poisition:fixed

二、什么是浮动： 浮动可以让元素脱离文档流，展示在文档流的上一层。页面的任何元素都可以设置浮动，可以让元素向左或者向右浮动，浮动到其它元素的外边距。浮动还可以强制性把元素变成块级元素。

语法： float:left/right 设置左、右浮动 clear:left/right/both 清除浮动 背景颜色<背景图片<元素内容

浮动应用场景： 1.如果很多块级元素需要在同一行展示 2.完成类似于导航条的功能（无序列表+浮动）

三、poisition 定位： a.static 默认定位 不定位，按照文档流的方式排列 b.relative 相对定位 相对于原来的位置 还会占用原来的空间 注：页面布局尽量少用，通常用于给绝对定位设置标准 c.absolute 绝对定位 会脱离文档流，默认情况下按照浏览器的窗口大小移动的。通常会设置一个标准，让其按照这个标准去移动 注：设置标准的方式，父级元素设置相对定位，后代元素设置绝对定位，后代元素就会相对父级元素而移动。只要保证父级元素宽高固定，浏览器改变大小，不受影响。 d.fixed 固定定位 使用方式和绝对定位一模一样，但是如果滚动条存在，其功能不会受影响。