div&css基础知识

骑猪看日落 2022-05-26 11:18 255阅读 0赞

## div与span ##

div、span标签它们仅仅是用来封装数据,而**不做任何的样式效果的设置**

#### 什么是div ####

div就是html一个普通标签,**进行区域划分。特性:独自占一行**,独自不能实现复杂的效果。需要结合css样式进行渲染。  
**div通常是块级元素**

#### 什么是span ####

也是一个html普通标签,**特性:共处一行。用来对行内元素进行美化**

--------------------

## css样式 ##

css使用的基本语法:

<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>

1、 color 设置字体颜色  
2、font-size 设置字体的大小  
3、border 设置边框 border:border-width border-style border-color; 分别用来修饰边框的粗细,边框的样式,边框的颜色。

--------------------

## css与html结合的方式 ##

###### 方式一:使用html标签的style属性(行内) ######

<div style="color: yellow; font-size: 100px; border: 1px solid red;">
            我是div
        </div>

###### 方式二:在head标签使用style标签设置(内部) ######

###### 　方式三：在head标签中的style标签使用@import(了解) ######

###### 方式四:在head标签中使用link标签引入css文件(比较常用) ######

--------------------

## css选择器 ##

###### 标签名选择器 ######

作用在当前页面的所有该名称标签上

标签名称｛
        css代码;
        ｝

###### ID选择器 ######

作用在某一个特定的标签上

#选择器的名称 ｛
    css代码；
    ｝

<标签名 id=” 选择器的名称” />

**注意:页面的id值不能重复**

###### class选择器 ######

作用在一组标签上

.选择器的名称 ｛
    css代码；
    ｝

<标签名 class=”xxxx” />

###### 组合选择器 ######

选择器1, 选择器2... { css代码 }

###### 关联选择器 ######

标签名 后代标签名 ｛
        css代码；
    ｝

这中方式可以使用class选择器同样实现,但是关联选择器更加**强调的是通过父亲查找孩子**

###### 属性选择器(了解) ######

选择器名[属性名="属性值"] { css样式； }

--------------------

### css常用样式 ###

*  border:设置边框的样式  
    
    
     *  格式:宽度 样式 颜色
     *  例如: style=”border:1px solid \#f00” , 1像素实边红色
 *  width、height
 *  display 转换  
    对块标签与行内元素的转换(块标签可以设置高度和宽度,行内元素不行)

选择器 { display : 属性值 }
    常用的属性值：
            inline：此元素将显示为行内元素（行内元素默认的display属性值）
            block：此元素将显为块元素（块元素默认的display属性值）
            none：此元素将被隐藏，不显示，也不占用页面空间。

*  line-height 行高
 *  在父元素内设置一个**text-align** 属性来规定元素中文本的对齐方式

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>文本排列到左边.默认值</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>把文本排到右边</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>把文本排列到中间</td> 
  </tr> 
 </tbody> 
</table>

*  背景:background-color, background- image
 *  背景平铺方式 background-repeat
    
     *  no-repeat:不平铺
     *  repeat- x: 横向平铺
     *  repeat-y:纵向平铺
 *  布局:float、clear(了解)

--------------------

### 边框(盒子模型) ###

![盒子模型][70]

*  盒子模型有哪几部分组成  
    元素的内容(高度、宽度)、内边距(padding)、边框(border)和外边距(margin)组成
 *  盒子模型大小受那些部分影响?  
    盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响

[70]: /images/20220526/8303e062b5f547f18cdc51e29c9b8832.png