Java 二阶段 CSS

CSS导入方式

优先级采用就近原则，谁近是优先级高。按程序的自上而下执行顺序。有可能内联>外联>内部

同种使用方式，比如都用内部，或者都是外联，优先级id>class>元素标签。

属性选择器

伪类选择器

/* 伪类选择器
   超链接的四种状态
   (1)a:link 初始状态
   (2)a:visited 访问之后状态
   (3)鼠标经过 a:hover
   (4)激活状态 a:active
  */

层级选择器

全局选择器

* {
}

文字属性

简写：swsf

文本属性

em: 1em 一倍字体大小 2em 二倍字体大小
正数：向右，向下偏移。

span是个行元素，默认是没有大小的，有内容决定它的大小，display:block，把span设为块元素，就可以设置大小了。

背景属性

简写：颜色 图片 平铺方式 位置
背景图片的大小：也可以自己设大小
background-size:

列表属性

inside:在li的里面
outside: 在li的外面，ul的里面
去掉项目符号
list-style-type:none;
简写：

尺寸显示轮廓

visibility:hidden 元素隐藏，位置还占有
visiable 元素可见。
display:none 元素隐藏，不占位置

浮动属性

clear属性

是对浮动元素之后的元素起作用

浮动元素也对父类产生影响，父类会没有高度。
1.直接给高度
2.在父元素里面加

<div style="height:0;clear:both"></div>

3:在父元素的样式中：overflow:hidden

#main {
    border: 1px solid red;
    /* 第一种方式 */
    /* height: 6.25rem; */
    /* 第二种方式 */
    /* overflow: hidden; */
   }
   <div id="main">
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div> 
   <!-- 第三种方式 -->
   <div style="height: 0; clear: both;"></div>
  </div>

overflow(处理内容溢出)

visible:可见
hiddle:隐藏，也会导致父元素重新计算高度。出发了BFC（Block Formatting Context）块级格式化上下文
scroll:滚动条

定位属性position

relative:相对于原来的位置进行偏移
absolute:相对于距离最近的非静态定位的父元素，如果找不到，就以浏览器

z-index

必须有定位。才能管用，设置层叠顺序。

盒子模型

border(边框)

margin(外边距)

margin:10px;上下左右都是10px
margin:10px auto；上下10px,左右自动
margin:10px 20px 10px; 上10px,左右20px,下10px
margin:10px 20px 10px 20px； 上右下左

两个盒子都有外边距，不会相加，只会重叠。

padding(内边距)

内容（盒子内容的宽度与高度）

width和height:就是内容的大小。他不会变

body自带内边距或者是内边距。设为零，就紧密连接。段落标签也自带边距。

reset.css normalize.css 实现跨浏览器，兼容。

border-radius(圆角)

box-shadow(阴影)

<!--水平 垂直 模糊程度 颜色-->
box-shadow:5px 5px 10px red

在容器里写英文不会换行，写中文会换行

除非加个属性word-wrap: break-word;