css个人总结

css 总结

一、css

1.1、概念

ccs （Cascading Style Sheet） ：层叠样式表

主要作用 ：界面布局 和 美化界面

1.2、语法

1.2.1 选择器

• 基本选择器
  • 类型选择器 h2{}
  • id选择器 .id{}
  • class选择器 .class{}
• 高级选择器
  • 通配符选择器 *{}
  • 分组选择器 .class .class2
  • 后代原则器 .father .son
  • 伪类选择器 a:hover
• 优先级 (多级依次比较)
  • !important > 行内样式>ID选择器 > class选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1.2.2、 使用方式

• 三种使用方式：行内样式 内部样式 外部样式.
  
  三种方式优先级： 行内样式>内部样式=外部样式（内外就近原则）
  
  就近原则：
  
  

1.2.3、路径

• 引入css文件目录两种方式： 相对路径：./***/***.css 或 …/***/***.css
  
  ./表示同级目录中 可以省略不写
  
  …/ 表示上级目录中
  
  绝对路径：C:***/***/xxxx.css
  
  文件存储的完整路径
  

1.3、主要内容

1. 字体属性：font
   • font-style:斜体设置。 normale(清除) italic( 斜体 )
   • font-weight:粗体设置。
     normal(清除) bold(加粗) bolder(巨粗)
   • font-family:字体类型设置 。 可以写多个用逗号隔开。使用已存在顺序靠前的一个类型
   • color: 字体颜色设置。
   • font属性集合。排列顺序 font-style font-weight font-size/line-height font-family 。其中font-style 和 font-weight 顺序随意 也可以直接去掉
2. 文本属性：text
   • text-decoration :修饰线。underline overline line-through none.
   • text-indent:缩进文本。px em
   • line-height:行高
3. 盒子模型：6大属性
   

   • width :宽 height：高 单位 px
     

     • width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性。
       
     • 对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定
       
     • width和height可以设置百分比，相对于父元素的width和height而言

   • border :边框

     • border-width：
     • border-style： solid(实线) dotted(点化线) dashed(虚线) none(没线) …
     • border-color : 颜色表示方式 英文名 | rgb函数 | 十六进制
     • border-四个方向相- width|style|color。

   • padding :内边距

     • padding-top
     • padding-right
     • padding-bottom
     • padding-left
     • padding:复合属性
       
       • padding：一个值 四边相同
         
         padding：两个值 第一个值表示上下的，第二个值表示左右的
         
         padding：三个值 第一个值表示上的，第二个值表示左右的，第三个值表示下的
         padding：四个值 分别是上、右、下、左
     • 特殊性:
       • padding可以使用百分比，是相对于父元素的width值，一般在响应式web中使用。
         
         有些标签有默认的padding值，如ul、ol等。
         
         对于行内元素，padding在垂直方向上不影响行高
         

   • margin:外边距

     • margin-top
     • margin-right
     • margin-bottom
     • margin-left
     • margin 复合属性：
       • margin：一个值，表示四个外边距都是一样的
       • margin：两个值，第一个值表示上下的，第二个值表示左右的
       • margin：三个值，第一个值表示上，第二个值表示表示左右的，第三个值表示下
       • margin：四个值，分别对应上、右、下、左
     • 特殊性：
       • 有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等。
       • 对于行内元素，margin在垂直方向上无效。
       • margin的auto设置。
       • 块状元素在垂直方向上有重叠现象
         • 兄弟关系的垂直重叠
         • 父子关系的重叠
       • margin可以使用负值

   • backgroud: 背景

     • backgroup-color:背景颜色
     • backgruop-image:背景图片
     • backgroup-repeat:图片平铺 repeat( 平铺 ) no-repeat( 不平铺 ) repeat-x( x轴平铺 ) repeat-y( y轴平铺 )
     • backgroud-position:(x,y) 背景图片定位 支持px 和 left top bottom right 和 %百分比
     • backgroud:复合属性
       • 顺序 ackground-color，background-image，background-repeat，background-position
     • background-attachment：滚动 scroll(滚动) fixed(固定) ！几乎不用
     • 细节：
       • background中的背景颜色，默认值是transparent，透明的。
       • background所覆盖的区域，包括padding和内容区域。（border先放一下，应用比较少）
       • 在设置背景的时候，很容易覆盖前面的设置。
       • background的顺序有要求，按照顺序来写

   • display:显示 (变形手术)

     • block:变为块元素
     • inline：变为行内元素
     • none：隐藏
     • inline-block:行内块 (具有块元素和行内元素)

   • list-style：列表

     • list-style-type : none 隐藏列表的头部点
     • 特殊性：
       • 具有继承性

   • 块元素 和 行内元素

     • 块元素：

     水平方向：
         1 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
         2 width、margin-left和margin-right可以设置为auto，其余必须为特定值，或默认为0
         3 如果margin-left/right都设置为auto，它们会设置为相同的长度，因此将元素在其父元素中居中
         4 如果3个属性都设置为auto，则两个外边距都会设置为0，而width尽可能宽，这是默认情况
         5 如果width、margin都是auto的话（这个前提不能少），我们再来设置padding或border，相应的width就会减小，保证整个块级元素的大小不要超过父元素。
         垂直方向
         1 margin-top、border-top、padding-top、height、padding-bottom、  border-bottom、margin-bottom
         2 默认高度由其内容决定，它会受内容宽度的影响，内容越窄，相应的就会越高
         3 相邻元素垂直相邻外边距会重叠
         4 父子元素间的重叠（同向margin、父元素没有border或padding、重叠是对外而言）
     

     • 行内元素

     水平方向
     1 margin-left、border-left、padding-left、padding-right、border-right、margin-right
     2 width无效，由内容本身决定
      垂直方向
     1 height无效，有font-size和line-height决定
     2 内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响元素行内框的高度，也不会影响包含该元素的行框的高度
     
     

1.4、布局

1.4.1 、三种布局方式

1. 流式布局
   • 流式布局就是元素从上到下，从左到右依次布局，并且块级元素独占一行，行级元素并排显示。
2. 浮动布局 float:left | right

   • 浮动布局破坏了流式布局，块级元素元素使用float会并排显示。

   • 特点：

     • 1 破坏了流式结构 —在一个块级容器中（如div），如果它的子元素，都有浮动（比如 float），并且没有清除这个浮动，那么块级容器将会塌陷
       
       2 块级元素浮动后具有包裹性 —如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可
       
       3 行级元素浮动后变成了块级元素
       
       4 浮动是半脱离：元素钻上去 但是文字还在原来位置 所以是半脱离
       5 行内元素浮动会变为块元素

   • 规则：
     

     • 1 浮动元素的左（右）外边界不能超出其包含块的左（右）边界
       
       2 第二小条：一个浮动元素的顶端不能比父元素的内顶端更高
       
       3 元素不能一直浮动到其父元素的顶端
       

   • 影响：

     • 对父元素造成的塌陷
     • 后面的兄弟元素重叠影响
     • 元素浮动也会对它后面的元素造成影响 ：后面的元素会钻上去，但是文字不会，文字会形成字围效果
3. 定位布局

1.5 特殊记录

记录

1. 标签 溢出部分变为…

   width: 198px;          //给定宽度
   white-space: nowrap;   //不换行 
   text-overflow: ellipsis; // 省略号  
   overflow: hidden;//溢出隐藏
   

2. 变性情况

   • 女标设置宽高需要 display：block ; 变形为男标
   • 盒子浮动后 女标自动变性

3. 清除浮动造成的塌陷

       overflow:hidden; //清除对父元素的影响 父元素样式添加
       clear:both|left|right ; //清除兄弟元素之间的影响 受影响兄样式中添加。
   

4. 居中方案

       text-align :center;
       margin:0px auto;
       heignt : 555px; ling-height: 555px; // 行高等于文本
   

5. text-align:center 真的只是让文本居中么？

   ext-align的功能远不止如此。
   对于具有文本类属性的元素，text-align属性也可以使其水平居中显示。
   具有文本类属性的元素有：行内元素、行内块元素。也就是说text-align属性也可以使这些元素水平居中。

6. line-height的使用

   ine-height作用于内联元素
   line-height作用于替换元素和块级元素

7. 清除塌陷

   1. 设置行高
   2. overflow:hidden; //清除对父元素的影响 父元素样式添加
   3. clear:both|left|right ; //清除兄弟元素之间的影响 受影响兄样式中添加。
       clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用
   

8. 重叠

   什么时候，可以让两个盒子重叠到一起
   1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流