css基础篇2

不如沉默，踏实做，看时间怎么说

文章目录

• • • • • 三大特性
        • 盒子模型
        • 浮动
        • 定位
        • 书写位置

三大特性

• 层叠性
  • 相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个样式
  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠
• 继承性
  • 行高的继承性 body{font: 12px/1.5 Microsoft YaHei;}
  • 行高可以跟单位，也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高是：当前子元素的大小 * 1.5
  • body行高1.5 这样写法最大的优势就是里面的子元素可以根据自己文字大小自动调整行高
• 优先级
  • !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性
  • 当同一个元素指定多个选择器，就会有优先级的产生
    • 选择器相同，则执行层叠性
    • 选择器不同，则根据选择器权重执行
  • 权重
    • !important：无穷大
    • 行内样式：1,0,0,0
    • ID选择器：0,1,0,0
    • 类和伪类选择器：0,0,1,0
    • 标签选择器：0,0,0,1
    • 继承或者*：0,0,0,0
    • 注意点
      • 权重是有4组数字组成，但是不会有进位
      • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
      • 等级判断从左向右，如果某一位数值相同，则判断下一位数值
      • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
    • 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
      • div ul li -----> 0,0,0,3
      • .nav ul li -----> 0,0,1,2
      • a:hover -----> 0,0,1,1
      • .nav a -----> 0,0,1,1

盒子模型

• 组成：边框 + 外边距 + 内边距 + content
• 边框
  • border-width：定义边框粗细，单位px
  • border-style：边框的样式
    • none：没有边框 (默认值)
    • solid：实线 (最常用)
    • dashed：虚线
    • dotted：点线
  • border-color：边框的颜色
    简写举例：1px solid #f00;
• 内边距：padding 设置边框与内容之间的距离
  • padding: 5px;：1个值，代表上下左右都有5像素内边距
  • padding: 5px 10px;：2个值，代表上下内边距是5像素，左右内边距是10像素
  • padding: 5px 10px 15px;：3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是15像素
  • padding: 5px 10px 15px 20px;：4个值，代表上内边距是5像素，右内边距是10像素，下内边距是15像素，左内边距是20像素 (顺时针)
• 外边距：margin 设置盒子与盒子之间的距离
  • margin-top ：上外边距
  • margin-right：右外边距
  • margin-bottom：下外边距
  • margin-left：左外边距
    margin简写方式代表的意义跟padding完全一致
  • 外边距让盒子水平居中的两个条件
    • 盒子必须指定了宽度
    • 盒子左右的外边距都设置为auto
      注意：这是让块元素水平居中的方法，行内元素或者行内块元素水平居中给其父元素添加text-align: center;即可
  • 解决margin塌陷问题的方法
    • 给父元素添加透明上边框 border-top: 1px solid transparent;
    • 给父元素添加 padding-top: npx;
    • 给父元素添加 overflower: hidden
    • 给父元素添加 position:absolute;
    • 给父元素添加 position:fixed;
    • 给父元素添加 display:inline-block
• 清除内外边距： *{padding: 0; margin: 0;}
• 圆角边框：border-radius:8px;
  • 参数值可以为数值或者百分比的形式
  • 如果是正方形，想要设置一个圆角，把数值改为高度或者宽度的一半即可，或者直接写为50%
  • 该属性可以跟四个值，分别是 左上、右上、右下、左下
  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
• 盒子阴影：box-shadow:h-shadow v-shadow blur spread color inset;
  • h-shadow：水平阴影的位置，允许负值 (必写)
  • v-shadow：垂直阴影的位置，允许负值 (必写)
  • blur：模糊距离 (可选)
  • spread：阴影的尺寸 (可选)
  • color：阴影的颜色 (可选)
  • inset：将外部阴影(outset)改为内部阴影 (可选)
    注意：盒子阴影不会影响其他盒子排列
• 文字阴影：text-shadow:h-shadow v-shadow blur color; 值跟盒子阴影一样

浮动

• 传统网页布局的三种方式
  • 普通流 (标准流)
    • 标签按照规定好的默认方式排列
    • 块级元素会独占一行,从上向下顺序排列
    • 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
  • 浮动
  • 定位
• 需要浮动的原因：有很多的布局效果,标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
• 最典型的应用：可以让多个块级元素一行内排列显示
• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
• 语法：选择器{float: 属性值;}
  • none：元素不浮动 (默认值)
  • left：元素向左浮动
  • right：元素像右浮动
• 特点
  • 相邻的浮动的元素，会找浮动的元素，会再同一行内显示，顶部对齐，要浮动都浮动，要不浮动都不浮动
  • 浮动的元素会脱离文档流，在页面中不占据位置
  • 浮动的元素只会影响下面的元素，但是不会压住图片和文字
  • 浮动的元素不会压住父元素的padding值，在父元素的padding内部进行浮动
  • 加了浮动的元素的显示方式基本和行内块级元素一样
    注意：浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下加了浮动的盒子,多出的盒子会另起一行对齐
• 需要清除浮动的原因
  • 很多情况下我们不方便给父元素高度，想让子元素撑开父元素，但是父元素一旦浮动，就会导致父元素直接高度为0，检测不到子元素的高度了，这时就需要清除浮动
• 清除浮动的方法
  • 额外标签法：在浮动元素的末尾加一个空标签，用clear: both;属性来清除浮动
  • 给父元素添加 overflower：hidden;
    • overflow: hidden;：隐藏
    • overflow: scroll;：添加滚动条
    • overflow: auto;：自动判断是否添加滚动条
    • overflow: visible;： 显示元素 (默认值)
  • 给父元素添加 :after伪元素法

  .clearfix:after {   
     content: "";  
     display: block;  
     height: 0;  
     clear: both;  
     visibility: hidden;   
  }  
  .clearfix {  /* IE6、7 专有 */  
     *zoom: 1;
  }  
  1. 元素就是标签 伪元素 假的标签 不是真的标签
  2. 伪元素添加进来的标签 在html中是不存在的 是通过css加进来的
  3. 伪元素加进来的是个行内元素
  4. 其中content是必写属性
  

  • 父级双伪元素

  .clearfix:before,.clearfix:after {
     content: "";
     display: table;  
  }
  .clearfix:after {
     clear: both;
  }
  .clearfix {
      *zoom: 1;
  }    
  

定位

• 语法：选择器{position: 属性值;}
  • static：静态定位 (默认值)
    • 元素不会以任何特殊方式定位，它始终根据页面的正常流进行定位
  • relative：相对定位
    • 元素相对于其正常位置进行定位
  • absolute：绝对定位
    • 元素相对于最近的定位元素进行定位
  • fixed：固定定位
    • 元素相对于视口定位，即使滚动页面，它也始终处于同一位置
  • sticky：粘性定位
    • 元素根据用户的滚动位置进行定位
• 注意
  • 除了静态定位，别的定位都需要使用top，right，bottom，left这些属性来指定元素的位置
  • 绝对定位和固定定位会始元素脱离文档流
• 重叠元素
  • z-index：设置元素的堆栈顺序
• 实际运用
  • 子绝父相：父元素设置相对定位，子元素设置绝对定位，设置top,right,bottom,left实现盒子水平垂直居中

书写位置

• 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
• 自身属性： width / height / margin / padding / border / background
• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 其他属性(css)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.djs {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}