css基础内容以及盒子模型_css中盒子以及盒子里面的内容-CSDN博客

本文链接：https://blog.csdn.net/m0_67557534/article/details/124085241

css样式基础

-语法规范：

 <head>
<style>p {color: red;}</style>
 </head>

一、样式表的位置
1、行内样式表（行内式）

适合于修改简单样式
2、内部样式表（嵌入式）

一般将style标签放在head标签内
3、外部样式表（链接式）

推荐使用，可控制多个页面
二、字体样式与文本样式
1、字体样式
（1）字体系列

body {font-family:"Microsoft Yahei";}

当代码中有多个字体时，系统依次查找是否有该字体。
（2）字体大小

body {font-size:16px;}

（3）字体粗细

<head>
<style>
.bold{
font-weight:bold;}
<!--或者写font-weight:700;-->
</style></head>
<body>
<p class="bold">内容</p>
</body>

（4）字体样式

em {font-style:normal;}<!--可以让斜体复原-->
<!--italic为斜体样式-->

复合属性写法

<!--font:font-style font-weight font-size/line-height font-family;顺序不可更改！！-->
<!--size和family必须保留-->
div {font:font: italic 700 16px 'Microsoft yahei';}

在这里插入图片描述
2、文本样式请添加图片描述
注：
（1）color
主要使用预定义的颜色值、十六进制和RGB代码。
（2）text-align

div {text-align:center;}<!--左对齐left右对齐right-->

（3）text-decoration

a {text-decoration:none;}
<!--取消a默认的下划线-->

css基础选择器及权重

一、基础选择器
用于选择标签

选择器分为基础选择器和复合选择器，基础选择器是由单个选择器组成的，基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。
（1）标签选择器

标签名{
  属性1：属性值1；
  属性2：属性值2；
  }

（2）类选择器

.类名{
   属性1:属性值1；
   }

使用时：

<div class="类名">

画盒子
多类名
在标签class中可写多个类名，需用空格隔开。
（3）id选择器

#id名{
   属性1:属性值1;
   }

使用时：

<!--只能调用一次！！-->
<div id="id名">

（4）通配符选择器

<!--自动给所有元素使用样式-->
*{
  属性1:属性值1;
   }

二、权重
请添加图片描述

块级元素和行内元素的特点及转换

一、块级元素
常见的块元素有h1~h6、p、div、ul、ol、li等
特点：

独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注：文字类元素，如p、h1~h6，里面不能放块级元素
二、行内元素（内联元素）
常见的有a、strong、b、u、span等
特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是本身内容的宽度
行内元素只能容纳文本或其他行内元素

注：链接里不能放链接，但a标签里可以放块级元素
三、行内块元素
常见的有img、input、td等
特点：

和相邻行内元素在一行上，但之间会有空隙，一行可显示多个
默认宽度是本身内容的宽度
高度、宽度、外边距以及内边距都可以控制

四、相互转换
转换为块级元素：

a {
    width:150px;
    height:50px;
    background-color:red;
    **display:block;**
    }

转换为行内元素：

display:inline;

转换为行内块元素：

display:inline-block;

css样式的三大特性

三大特性分别是层叠性、继承性和优先级
1、层叠性
原则：样式冲突，遵循就近原则
样式不冲突，不会层叠
2、继承性
子标签会继承父标签的某些样式，如文本颜色和字号。（text-、font-、line-、color可继承）
注：

body { <!--1.5是当前元素文字大小的1.5倍-->
       font:12px/1.5 'Microsoft Yahei'
       }

3、优先级

选择器相同，执行层叠性
选择器不同，根据选择器权重执行
注：继承的权重是0！

盒子模型

盒子模型的组成：边框（border）、实际内容（content）、外边距（padding）和内边距（margin）。
1、边框
请添加图片描述
在这里插入图片描述
注：

简写：border：1px solid red；没有顺序
可分开设置：border-top(bottom.left.right)
边框会影响盒子大小
（1）表格

table,
td {<!--给表格线设置颜色-->
      border:1px solid red;
      }

border-collapse：collapse;
<!--合并相邻的边框-->

2、内边距

padding-left(right/top/bottom)
简写
如果盒子已经有了宽度和高度，那么内边距会撑大盒子
如果盒子没有设置高度和宽度，则不会撑大盒子
3、外边距
margin-top(bottom/left/right)
简写与padding相同
典型应用：让块级盒子水平居中
方法：盒子必须指定宽度，左右外边距都设置为auto