CSS基础5--选择器和盒子模型

2020-09-18 本文已影响0人伊洛的小屋

选择器

选择器用来指定网页上我们想要样式化的HTML元素，比如H1元素和类元素.special

选择器列表

分开规则

h1 { 
  color: red; 
} 

.special { 
  color: blue; 
}

组合规则

h1, .special { 
  color: red; 
}

任何一个选择器无效,整条规则就会被忽略

选择器的种类

类型、类和ID选择器：标签名选择器”或者是”元素选择器“，选择了一个HTML标签/元素
ID选择器：ID选择器开头为#而非句点
全局选择器：是由一个星号*代指的

* {
    margin: 0;
}

类选择器：类选择器以一个句点.开头

盒子模型

所有的元素都被一个个的“盒子（box）”包围着

块级盒子

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width和height属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题<h1>和段落<p>默认情况下都是块级的盒子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>微信搜索：伊洛的小屋</title>
      <link href="index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <p>这是一段优美的文字</p>
<ul>
  <li>文字1</li>
  <li>文字2</li>
  <li>文字3</li>
</ul>
<p>这是另外的一段 <span class="block">非常</span> 优美的 <span>文字</span>啊</p>
  </body>
</html>

css渲染

p,
ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}

.block,
li {
  border: 2px solid blue;
  padding: .5em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}

第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行
第二个是一个列表，布局属性是 display: flex。将在容器中建立一个flex布局

CSS 盒模型

盒子模型结构

Content box: 这个区域是用来显示内容
Padding box: 包围在内容区域外部的空白区域
Border box: 边框盒包裹内容和内边距
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域

图片来源于百度

外边距

通过margin控制元素的所有边距
margin-top, margin-right, margin-bottom, margin-left

边框

使用border属性可以设置四个边框的宽度，颜色，样式
设置每边的宽度、颜色和样式

border-top
border-right
border-bottom
border-left
设置所有边的颜色、样式或宽度
border-width
border-style
border-color
设置单边的颜色、样式或宽度
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

内边距

用padding性控制元素所有边，或者每边单独使用等价的普通属性

padding-top
padding-right
padding-bottom
padding-left