css的常用属性

文本标签

style：风格样式，css设置基本样式的基础标签，需要用分号结尾

background-color：背景颜色
opacity:0.5;设置字体透明度
color：文字颜色
margin：0px  ；调整字体间距
font-family：“华文中宋”；字体类型
font-size：0px；调整字体大小
font-weight：bold；字体加粗
font-style：italic；斜体字
text-indent：60px；字体缩进
text-align：center；字体居中显示，left，right，左右显示
line-height：100px；文字行高
text-decoration：underline；添加下划线
text-decoration：none；表示文字没有任何效果，如果有些浏览器文字自带效果可以使用这个。
text-decoration：overline；给文字添加天花板
text-decoration：line-through；给文字添加中划线
test-shadow：0px 0px 0px 颜色；文字阴影效果，第一个是阴影效果水平移动，第二个是垂直移动，第三个是阴影大小
​
list-style：none；对列表声明属性，none让前面的小圆点消失

图片超链接

伪类超链接：

给一段文字设置超链接，然后在样式里面调用

调用：a: hover{text-decoration：none}

表示鼠标移动到超链接先不回出现下划线

给容器添加背景图片：

给容器设置样式：

background：背景颜色 url（图片地址） 0px opx no-repeat

url相当于src引用图片地址，只是给容器设置的是背景图片，第一个大小是调整图片的水平位置，第二个是调整图片垂直位置，当图片比容器小的时候图片就会重复出现布满容器，no-repert让图片不重复出现，

当css样式在css文件中，需要获取img文件里面的图片就不能直接找img包，需要跳转到上级文件之后再去调用，返回上级目录加上点点xiegan，格式：../img/

边框边距

borde：表示边框
​
格式：borde：颜色 solid 1px 1px 1px 1px
表示设置上下左右边框
​
边框的格式顺序是个特例可以改变
​
只设置一个大小表示设置一个带有颜色的1px宽度的实线边框
​

solid：实线
dashed：虚线
otted：虚细线
none：没有虚线  格式：style=“borde：none；”
padding：0 15px；表示大边框拉长

给表格设置边框的时候会出现边框重叠的问题， 需要加上border-collapse：collapse；边框合并；

边距： 让一个元素容器外边增加空间，可以让元素和元素之间隔开，但不改变元素本身大小。网页上所有元素容器都会有大小，可以给元素本身设置一个边框边距。

*{ margin：0； } 表示将素有哦的元素边距都设置为零，即让网页布局充满屏幕不会溢出

margin：0 auto；让元素自动设置边距，使左右边距相等，即可达到居中效果，只针对水平方向。
​

margin-top：10px；给元素顶部设置边距
margin-right；给元素右边设置边距
margin-bottom；给元素底部设置边距
margin-left；给元素左边设置边距

填充（内边距）： 向一个元素内部增加空间，填充会改变元素大小。随着填充的额增加，元素会被撑大。

padding-top；给元素顶部设置填充
padding-right；给元素右边设置填充
padding-bottom；给元素底部设置填充
padding-left；给元素左边设置填充

塌陷： 当一个容器不设置边距边框的时候，给容器里面的容器设置边距会贴近外容器，因为外容器没有边框，需要给外容器设置边框边距

溢出： overflow：hiddon 把溢出的部分隐藏，当内容器的长度超过了外容器的长度会直接溢出超出外容器，如果需要不让内容器的长度超过外容器就加上溢出。

行内元素建议只设置左右内外边距。行内元素比如span标签只会水平独占一行，设置了上下边距，虽然会有边距，但是在浏览器不会渲染出来。

容器排版

span： 容器标签，不具备任何特殊功能，用于包裹一段文字，便于给文本添加样式

div： 一个通用容器标签，不具备任何功能，仅当做容器来使用，可以包裹任何内容，也可以容器之间互相包裹，一个空的div默认宽度为100%，高度为零

margin：auto；可以让容器本身水平居中显示

样式种类和选择器

一、行内样式 直接在标签内部添加style属性

二、内部样式 代码写在《head》的《style》标签里面

 <style type="text/css">
        容器名字{
            属性
        }
    </style>

style表示的是样式， ​ text/css表示的是在当前页面写css样式 ​ 如果多个容器的样式一样可以写在一块，容器名字逗号隔开

三、外部样式 需要在《head》标签里面申明引入 《link href=“外部文件路径” rel=“stylesheet” type“test/css” /》 rel是用来说明本页面和连接到的页面的之间的关系 stylesheet指定一个固定或首选的样式，一般使用这个

优先级 行内样式 》 内部样式 》 外部样式表

选择器： 基本选择器： 一、标签选择器 标签选择器是给整个标签容器添加属性，在style样式表中只需要通过标签{}的方式进行添加

二、类选择器 类选择器是单独给容器里面的个体添加另外的属性 给需要添加其他属性的容器添加一个类名class=“类名” 然后在style样式表中通过点类名{}类进行属性添加，类名 可以相同

三、id选择器 当类名相同的情况下又需要精确区分属性，就需要用到id选择器，给这个属性添加class名时，再添加id名，id不能相同，在style样式表中通过#id{}来修改属性

高级选择器： 层次选择器 四、子选择器 e>f表示修改e属性下面f属性，当f有子属性时不做修改

五、相邻选择器

六、通用选择器 e~f表示修改e到f属性的修改

结构伪类选择器： 七、结构伪类选择器 属性名：ntf-of-type(3){}指定每个属性名匹配同类型中的第三个同级元素的属性进行修改

属性选择器： 八、属性选择器 【class】{}表示给只要有class的都进行修改

【title=‘test’】{}表示给title属性值为test的进行修改

【title*=‘k’】{}表示在全部title属性中，属性值带有k的进行修改

【title^=‘s’】{}表示在title属性中，属性值前面带有s的进行修改

【title$=‘s’】表示在title属性中，属性值后面带有s的进行修改

元素的浮动布局

当两个div需要放再同一行不使用浮动时，只能使用display：inline；

但是两个div之间会有空格，需要解决这个问题就需要用到浮动。

float：left；左浮动
float：right；右浮动
overflow：auto；表示溢出的意思
​
clear：left；不受左浮动影响
clear：right：不受右浮动影响
clear：both；不受浮动影响

浮动元素排版： ①给元素设置一个外容器 ②给外容器增加overflow：auto；可以做自动调整 ③让下一个元素或容器不受到浮动元素影响，

元素浮动特点： ①元素浮动不占据容量空间，例如容器高度30px，内浮动元素高度300px，容器大小不会撑开，或者当父元素没有设置高度，子元素没有设置浮动的时候，子元素的高度就是父元素的高度，但是当子元素设置浮动的时候，父元素会塌陷，高度我零，所以在给元素浮动增加外容器时要设置浮动元素一样的高度。

②浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠。

③浮动元素在排列时，只参考前一个元素位置即可，例如当地一行的位置不够时，且有三个大小不一的容器，下一个容器的位置不会在第一个的下面，会在第三个容器的下面，不会受到第一个和第二个容器的影响

④浮动的盒子只会影响后面的标准流，不会影响到前面的标准流

⑤有两个大容器a，b，当a作为父容器里面有两个子容器有浮动时，后面的b容器如果没有高度的话，高度会和容器的宽度一样，且宽度是100%会和a容器重叠

④右浮动影响，当第一个第二个都添加右浮动时候，第一个会出现在最右边

当元素只设置浮动时下一个元素容器会覆盖浮动容器，这时候就可以用这个效果设置一些特殊效果，比如文字环绕效果

文字浮动特点： ①、浮动元素不会覆盖文字 ②、浮动文字不会覆盖图片内容 ③、浮动元素不会覆盖表单元素

行内元素不能设置宽高，但是当行内元素使用了浮动就会使行内元素有了宽高，可以设置 如果块级盒子没有设置宽度，默认的宽度和父亲元素一样的宽度，但如果加入浮动元素，大小由内容决定

行内元素需要转换为块级元素需要加上display：block

父级元素自适应高度： 由于高度为零，导致父级元素塌陷，而某些情况又不能设置高度： 解决办法： 一、添加额外标签，给元素末尾添加空标签，这个标签必须是块级元素，然后在里面添加clear属性清除浮动

clear：left；
clear：right；
clear：both；（一般就用这个，清除左右浮动）

二、给父元素添加overflow属性 overflow：hidden；

三、父级元素添加after伪元素（常用） 父级元素：class=“father clear” 父级元素定义长宽高居中继续在style中.father{}中定义 再在style样式中设置一个容器：

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

这个时候给这个容器设置一个清除浮动就行了，和第一个的意思一样

定位

定位可以让盒子自由的在另外一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

定位格式：定位模式+边偏移

定位模式： 1、静态定位：static 2、相对定位：relative 3、绝对定位：absolute 4、固定定位：fixed

边偏移：（定义元素相对于其父元素的位置） top、bottom、left、right

静态定位： 默认的定位方式，无定位的意思，无实际含义 格式：position：static 特点：按照标准流程布局，无偏移

相对定位： 相对定位是指元素在移动位置的时候，相对于它原来的位置 格式：position：relative；偏移量； 特点： 原来的位置会继续占有，保留原来的位置 当有两个容器都设置左浮动的时候，第一个容器相对定位移走了，第二个容器的位置也是在第二位，不会占有第一个的位置 当相对定位的位置有容器的时候，定位的容器会覆盖原本在这个位置的容器。

绝对定位： 在没有父级或者父级没有定位的情况下，绝对定位的是以浏览器为基准的。 在它的父级有定位（相对、绝对、固定定位），则以最近的父级元素为参考点移动位置，比如爷爷元素有定位，爸爸元素没有定位，子元素的绝对定位就对照的是爷爷的位置为参考点 绝对定位不再占有原先的位置

绝对和相对： 子级一般使用绝对定位，父级一般使用相对定位 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位