CSS基础 | 青训营笔记

用户端
84 阅读5分钟

为什么学css？

相比于之前的网页，使用了css的网页具有更好的使用体验和视觉效果，能够更精准的传递信息。

css发展历史

  • css1：解决网页排版布局和装饰问题，第一各有“层叠（casading）”概念的语言
  • css2：html表现和css内容分离
  • css2.1：主要对css2进行修正和扩展，并取代css2
  • css3：规范化模块发展，样式丰富、酷炫，提高网站的可维护性以及性能速度。

基础知识

css（Casading Style Sheets）：层叠样式表

层叠规则：

  1. 样式表来源：浏览器默认样式>用户样式表>developer写的样式，对于“！importanct”关键字，则程度相反）
  2. 选择器优先级；
  3. 源码位置：就近原则

继承：

继承方向是DOM节点树从根节点开始往下继承。大部分的标签具有继承特性的属性，其大部分与文本相关，例如color、line-height、text-indent等。可以使用inherit关键字显式指定一个属性值从其父元素继承。

例如：DOM关系：h1=div>h1，想要h1继承card的字体大小

h1 {
font-size: 28px;
}
.card {
font-size:24px;
}
.card h1 {
font-size: inherit;
}    //最后h1会是24px，将28覆盖掉

盒模型：

浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css通过盒模型来做layout。

  • 控制盒子类型：display:block、inline、inline-block、flex等
  • 控制盒子大小：width、height、box-sizing等
  • 控制盒中内容流：overflow：auto、scroll、hidden等
  • 控制定位：position：relative、absolute、fixed等
  • 控制盒子是否可见：visibility：hidden、visibile等

注意点：

  • 选择器尽量少用id；
  • 尽量不要使用！important；
  • 自己的样式加载在引用库样式的后面

布局和定位

Normal Flow 常规流：

默认的布局方式，有块级格式化上下文和内联格式化上下文；

BFC 格式化块级上下文：

含义：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括子元素中又创造了新的BFC区域的内部元素。

触发BFC

   并不是任意一个元素都可以被当做BFC，只有当这个元素符合以下条件任意之一，才可以被当做BFC
    条件：
        （1）body根元素
        （2）设置了浮动，不包括none
        （3）设置了定位，absolute、fixed
        （4）行内块显示模式，inline-block
        （5）设置浮动overflow，即hidden，auto，scroll
        （6）表格单元格，table-cell
        （7）弹性布局，flex

利用BFC解决问题

（1）解决外边距塌陷问题（垂直塌陷）
         <div class="HM"></div>      
         <div class="HM"></div>
    样式：.HM { width:200px;  height:200px; background-color:red;  margin:100px;}    
  这样的话，两个盒子的垂直距离是100px，而不是100+100，两段margin融合在一起了;
  而BFC是一个独立的区域互不影响，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。
       <div>    
         <div class="HM"></div>
      </div>   
      <div>                           
         <div class="HM"></div>                 
      </div>
   样式： .HM { width:200px;  height:200px; background-color:red;     margin:100px; overflow:hidden;}
 （2）解决包含塌陷问题
     <div>    
       <div class="H"></div>
     </div> 
当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑

Float 浮动流：

使用float属性控制，脱流，通常用于做横向布局；

Flex 弹性布局：

为盒装模型提供最大的灵活性。所有元素都可以设置弹性布局，且设置之后float + clear + vertical-aline属性将失效。父元素设置了flex布局之后，它的所有子元素自动成为flex item。容器自动含有两个轴，主轴、交叉轴。 flex布局的优点

  • 在flex眼中，标签不再分类，简单来说就是没有块级元素，行内元素之分
  • 响应式布局，提高了布局的效率、灵活性，适应不同的屏幕大小以及设备类型

例如：适应不同的屏幕大小以及设备类型

  • flex：1

是flex-grow、flex-shrink、flex-basis的简写，默认flex：1 , 0，auto，后面两个属性可不写。 Gird 网格布局

定位：

定位=定位模式+边偏移。

定位模式分为四个，通过css的position属性来设置：

  1. static静态定位；
  2. relative相对定位：是元素在移动位置的时候，相对于它原来的位置来说的；
  3. absolut绝对定位：
  • 是元素在移动位置的时候，相对于它的祖先元素来说的，如果没有父元素或者父元素没有使用定位，则相对于浏览器来定位:
  • 如果父元素有使用定位，则以最近一级有定位的祖先元素为参考位置；
  • 绝对定位是脱标的不占有原来的位置；
  • 加了绝对定位的盒子可以直接设置宽度和高度，不需要转换为行内块元素或块级元素。
  • 口诀：子绝父相，则使用绝对定位的元素，其父元素要用相对定位。

定位的特殊性：

  • 行内元素添加了绝对定位或者固定定位后，就可以直接设置高度宽度值
  • 块级元素添加绝对定位或者固定定位后，如果不给宽度或者高度，则默认大小是内容的大小
  • 绝对定位或固定定位会压住下面标准流的全部内容
  • 固定定位和绝对定位设置时，与float不能同时起作用，，float的优先级更高

响应式设计

响应式设计遵循的原则：

  • 有限选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸、节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem、vw作为长度度量
avatar
文章
阅读
粉丝