CSS属性+盒模型知识点整理

由于刚刚开始学习写博客, 可能很多地方都存在不足, 希望看到的朋友可以给些建议 , 谢谢接下来继续接着上一篇博客, 继续学习web前端开发css知识点
‘*’通配符选择器经常用作为网页的初始化
先写功能, 再从库从去挑功能, 一种反向逻辑
自己写的属性可以覆盖原标签的属性, 因此可以自定义标签, 创造标签

接下来继续接着上一篇博客, 继续学习web前端开发

#css

##知识点

  • ‘*’通配符选择器经常用作为网页的初始化
  • 先写功能, 再从库从去挑功能, 一种反向逻辑
  • 自己写的属性可以覆盖原标签的属性, 因此可以自定义标签, 创造标签
  • 浏览器中的 element.style{ } 是行间样式
  • 图片当改变宽之后,高等比例缩放
  • 主流浏览器及其内核
    |主流浏览器|内核|
    |:——-|:—–|
    |Internet Explorer|trident|
    |Google chrome|webkit/ blink|
    |Opera|presto|
    |Firefox|Gecko|
    |safari|webkit|
  • 一般body都自带外边距, 8px(大部分, 不是所有)

##CSS属性

  • text-decoration 下划线. 例: text-decoration: none;
  • display 设置元素类别.
    display: inline/ block/ inline- block

##元素类别

  • 行级元素\ 内联元素\ 行内元素 inline
    ->特点:(符合文字特性)
  • 不可以通过CSS设置width, 和height
  • 里面的内容决定了元素所占大小
  • 分别一下几种标签:
    < span >< /span >
    < em >< /em >
    < strong >< /strong >
    < a herf = “”>< /a >
    < del >< /del >
    < b >< /b >
    < i >< /i >

  • 块级元素 block
    ->特点:

  • 可以通过CSS 改变width height
  • 无论内容多少, 都占满整行
  • 分别有以下几种标签:
    < div >< /div >
    < ul >< /ul >
    < li >< /li >
    < ol >< /ol >
    h1-h6
    < p >< /p >
    < form >< /form>
    < address >< /address>
    < body >< /body >
  • 行级快元素 inline-block
    ->特点:
  • 可以改变宽高
  • 内容决定所占大小
  • 分别有以下几种标签:
    < img src = “” alt = “”>
    < input type = “”>
    ##盒子模型
    盒子模型分为以下几种:
  1. 外边距 margin: 盒子与浏览器壁空开的距离
  2. 边框 border
  3. 内边距 padding: 盒子壁和盒子内容之间的距离
    • padding
      设置边框的内边距,
例1: padding: 100px, 100px, 100px, 100px;

分别对应padding: padding-top, padding-right, padding-bottom, padding-left.

例2: padding: 100px, 200px, 150px; 

分别对应: 上, 左右, 下;

margin, border的设置同上

  1. 内容区
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!