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

感觉好像markdown编辑器在移动端显示貌似有点问题, 很多列表编号都没有了, 好奇怪.

由于刚刚开始学习写博客, 可能很多地方都存在不足, 希望看到的朋友可以给些建议 , 谢谢

接下来继续接着上一篇博客, 继续学习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的设置同上
4. 内容区