web前端day04-css之盒子模型

/ web前端 / 没有评论 / 226浏览
web前端day04

知识点回顾

  1. CSS 层叠样式表 美化页面
  2. 引入方式:三种,
  3. 内联:在标签的style属性里面写样式代码 弊端不能复用,优先级最高
  4. 内部:在head标签里面添加style标签,好处可以当前页面复用,弊端不能多页面复用
  5. 外部:在单独css文件中写样式代码,在head标签内部通过link标签引入css文件,好处可以多页面复用
  6. 选择器
  7. 标签名选择器: 标签名{}
  8. id选择器: #id{}
  9. 类选择器: .class{}
  10. 属性选择器: 基础选择器[属性名='属性值']
  11. 任意元素选择器: *{}
  12. 后代选择器 div span a{}
  13. 子元素选择器 div>span>a{}
  14. 分组选择器 div,#id,.class{}
  15. 伪类选择器 未访问 a:link 访问过 a:visited 悬停:a:hover 点击🅰active
  16. 颜色赋值 #00ff00 #0f0 rgb(0,255,0) rgba(0,255,0,0-1) 颜色单词
  17. 背景图片 background-color/image/size/repeat/position
  18. 盒子模型: 宽高,外边距,内边距,边框
  19. 宽高: 块级元素可以设置宽高,行内元素宽高由内容决定

外边距

元素边框距离上级元素或相邻兄弟元素边框的距离

边框

border-top/bottom/left/right: 1px solid red;

内边距

文本相关属性

    /* 文本水平对齐  left/right/center*/
    text-align: center;
    /* 文本修饰 上划线overline 
    下划线underline  删除线line-through  none(去掉元素自带修饰)*/
    text-decoration: line-through;
    /* 文本颜色 */
    color: green;
    /* 文本阴影 
    1.阴影颜色 2.x方向偏移值 3.y方向偏移值 
    4.模糊度 值越小越清晰*/
    text-shadow: blue -15px 15px 10px;
    /* 行高  用于让文本在元素中垂直居中,值为元素的高度*/
    line-height: 100px;

字体相关

    /* 字体大小 */
    font-size: 30px;
    /* 加粗 */
    /* font-weight: bold; */
    /* 斜体 */
    /* font-style: italic; */
    /* 字体 */ 
     font-family: "黑体";   
     font: 30px "SimSun","宋体","Arial Narrow",HELVETICA;

溢出设置 overflow

显示方式 display

重点知识点回顾:

  1. 盒子模型 边框+外边距+内边距+宽高 如何计算一个元素所占的宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
  2. 宽高: 块级元素可以设置宽高 行内元素宽高由内容决定
  3. 外边距: 元素边框距上级元素或相邻兄弟元素的距离, margin-left/top/right/bottom margin:10px; margin:10px 20px; margin:20 auto margin:10px 20px 30px 40px 上右下左 块级元素全部生效 行内元素上下不生效
  4. 边框: border-top/left/right/bottom:
    块级元素全部生效,会影响元素所占宽高 行内元素全部生效,会影响宽度不会影响高度
  5. 内边距:元素边框距内容的距离 padding:10px; padding:10px 20px 块级元素全部生效,会影响元素所占宽高 行内元素全部生效,会影响宽度不会影响高度

  6. 文本相关:

  7. 文本对齐方式 text-align:left/center/right
  8. 文本修饰 text-decoration:overline/underline/line-through/none
  9. 文本颜色 color:red
  10. 阴影: text-shadow:red 10px 10px 5px;
  11. 行高: line-height:10px;
  12. 字体相关
  13. 字体大小: font-size
  14. 加粗: font-weight:bold
  15. 斜体: font-style:italic
  16. 字体: font-family:xxxx
  17. 溢出设置
  18. 隐藏 overflow:hidden;
  19. 显示 overflow:visible;默认
  20. 滚动 overflow:scroll;
  21. 显示方式
  22. 块级 display:block
  23. 行内 display:inline
  24. 行内块 display:inline-block