从0开始学web-day11

最新推荐文章于 2024-07-20 23:15:07 发布

oxygen_ls

最新推荐文章于 2024-07-20 23:15:07 发布

阅读量238

点赞数

分类专栏：前端 # css 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122613883

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

1.复习
day10复习
2.html兼容

<!-- html兼容 -->
    <!-- lt小于 lte小于等于 gt大于 gte大于等于 -->
    <!-- [if lt IE 9]>
        <h1>标题文字</h1>
    <![endif]-->

3.css的兼容

		*ie7以下支持 属性前边随意添加前缀
        _ie6以下支持 
        属性值后边添加\0 ie8以上支持
        属性值后边添加\9 ie10以下支持

4.常见的兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.插入的图片会向下撑大3px
            解决方法：
            1图片设置vertical-align：top\middle\bottom（常用）
            2给图片添加display：block
            3给父元素设置font-size：0（不建议）
        2.使用图片作超链接在 在ie10以下的低版本会出现边框
            解决方法：
            给图片添加border：none
        3.表单控件行高不一致
            解决方法：
            给input元素添加float
        4.表单控件大小不一致（高度不同）
            解决方法：
            单独设置高度 使用怪异盒
            边框粗细不同（统一设置边框）
        5.鼠标指针变成小手型（一般认为小手型的就是可以点击的）
            解决方法：
            cursor：pointer；（还有其他属性值可以自行百度）
        6.透明兼容
            opacity：value； 值0-1 ie8以下支持 filter：alpha（opacity=value）；值0-100 ie8以下支持 内容会跟着变透明
        7.ie6的双边距问题
            解决方法：
            给浮动的元素添加display：inline；
        8.ie6的默认高度问题
            解决方法：
            font-size：0；或者overflow：hidden
        9.ie6百分比 ie6里50%+50%>100%
            解决方法：
            给浮向右边的元素添加clear ：right

     -->
     <div><img src="./pic1.png"></div>
     <div><img src="./pic1.png"></div>
     <div><img src="./pic1.png"></div>
</body>
</html>

5.fc
fc 格式化上下文
bfc 块级格式化上下文只有块级元素才有
ifc 行内格式化上下文
gfc 网格格式化上下文
ffc 弹性格式化上下文

6.bfc
bfc的解析规则
1.属于同一个bfc的区域自上而下独占一行
2.bfc区域的空隙由margin决定，上下margin会发生重叠取较大值
3.浮动的元素上下margin不会发生重叠
4.bfc的区域都与包含块的左边向接触
5.bfc的区域不会影响其他bfc的区域
6.bfc的区域计算高度的时候，浮动的元素也参与计算
触发bfc的条件
根元素html
position的值为absolute fixed
float：left right
overflow：hidden scorll auto
display：inline-block table-cell flex grid table-caption

7.ifc
ifc解析规则
总体高度取决于最高的那个元素
ifc区域如果添加一个块级元素会生成两个ifc

8.重置样式表

/* 清空浏览器默认值 */
* {
    margin: 0;
    padding: 0;
}
/* 如果不允许用* 块级元素 除了div之外都存在默认值 行内 除了img input textarea select之外都没有 */
/* html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dt, form, table, tr, td, img, input, select, textarea {
    margin: 0;
    padding: 0;
} */

/* 图片向下撑大3像素 */
img {
    vertical-align: middle;
    border: none;
}
/* 去掉列表符号 */
li {
    list-style: none;
}
/* 超链接去掉下划线 */
a, u, ins{
    text-decoration: none;
}
/* 去掉默认加粗 */
h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: normal;
}
/* 倾斜 */
i, em {
    font-style: normal;
}
/* 清除浮动 */
.clearfix:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden
}
  /* 左浮动 */
  .l {
      float: left;
  }
  /* 右浮动 */
  .r {
      float: right;
  }
  /* 安全区 */
  .safe {
      width: 1000px;
      margin: 0 auto; 
  }

9.可以继承的属性
继承，子元素可以用于父元素的属性及属性值
可以继承的属性：文字font-size font-weight font-style font-variant font-family color(超链接除外)
文本 text-algin text-indent word-spacing letter-spacing text-transform
列表相关属性 list-style list-style-type list-style-image list-style-position
其他属性 white-space
盒子相关的属性都不能继承 margin padding border width height