HTML（二）

最新推荐文章于 2022-09-29 10:20:30 发布

柒熠染云

最新推荐文章于 2022-09-29 10:20:30 发布

阅读量129

点赞数 1

分类专栏： HTML基础文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_46276093/article/details/121180525

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第二次培训：开始魔改div

一 . div选择器

1. class 类

<div class="class_name">
    <div class="content"></div>
    <span></span>
</div>

.class_name{
    background-color:blue;
}
.class_name span{
    
}

2. id 身份

<div id="id_num"></div>
<p id="b"></p>
<a id="b"></a>

p#b{
    background-color:blue;
}
a#b{
    background-color:blue;
}

3. name

<a name="first"></a>

4. 尝试把 test.html 玩明白

div .name{
    
}
p.name{
    
}
p .name,div.name{
    
}

对 div 和 p 标签中 class 为 name 的进行选择

div .name a
{
    
}
div.name span{
    
}

对 class 为 name 的 div 中的 span 和 a 进行选择

.name span{

}

对 class 为 name 中的 span 进行选择

.name{

}

对所有 class 为 name 的元素进行选择

p#name{
    
}
div#name{
    
}

对 id 为 name 的 p 和 div 进行选择

二 . div的基本属性

1. background-color

设置背景颜色

<body style="background-color:yellow">
<h2 style="background-color:red">1111111111</h2>
<p style="background-color:green">2222222222</p>

也可以使用：background

2. color

设置文字颜色

<p style="color:green">Huile</p>

3. font-family

设置字体样式

<p style="font-family:verdana;color:red"> WangJi </p>
<p style="font-family:times;color:green">Huile</p>
<p style="font-family:verdana;color:green">Huile</p>

4. font-size

设置字体大小

<p style="font-size:30px">复试3组</p>

5. text-align

属性规定了元素中文本的水平对齐方式：

包括:left,center,right

<h1 style="text-align:center">This is a heading</h1>

6. margin

margin调节与其他元素的间距

边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距

<div style="background-color:grey;height:80px;border:5px solid blue;margin:50px;padding:150px" align="center" >我是外层<div  style="background:red;width:50px;">我是内层</div></div>

margin:0 auto;

7. padding

padding调节与边框的间距

间隙属性(padding)是用来设置元素内容到元素边界的距离

<div style="background-color:grey;height:80px;padding:150px" >我是外层<div  style="background:red;width:50px;">我是内层</div></div>
<div style="background-color:grey;height:80px" >我是外层<div  style="background:red;width:50px;">我是内层</div></div>
<!--体会差异，均没有设置浮动，但是设置了pedding的左边产生了间隔-->

8. border

border用来设置框边线

border-width 边线宽度
border-style 边框类型
border-color 边框颜色

<div style="background-color:grey;border:5px solid blue" align="center" >我是外层<div  style="background:red;">我是内层</div></div>

9. float

元素在哪个方向浮动

<div style="background-color:grey;height:80px;float:center" >我是外层<div  style="background:red;width:50px;">我是内层</div></div>

三 . 布局与位置

1. display

block	块级元素的默认值，显示为块级元素，此元素前后会带有换行符（元素独占一行），拥有完整的盒模型特性
inline	行内元素的默认值。此元素会被显示为内联元素，元素前后没有换行符。margin和padding只能设置水平方向的
inline-block	行内块元素，拥有完整盒模型特性（CSS2.1 新增的值）
none	宽高为0

常用的默认是块级元素的的元素有：div、li、p、h1-h6

常用的默认是内联元素的的元素有：a、img、b、span

把块级元素改成行内元素演示

把行内元素改成块级元素演示

2. position

static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left :20” 会向元素的 LEFT 位置添加 20 像素。
inherit	规定应该从父元素继承 position 属性的值。

body部分：

<div class="father">
	<div class="son">
		<div class="sonson"></div>
	</div>
			
</div>
<div class="aaa"></div>

3.使用
元素的HTML布局

div元素布局

5.使用表格的HTML布局

下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

表格布局

6.flex布局

我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。
任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局

.box{
  display: flex;
  display：inline-flex;
}

修改父元素display:flex，你会发现div自动就排列成了一行
flex布局主要由容器属性和项目属性构成

flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序

.box{
				background:pink;
				width:100%;
				height:600px;
				flex-direction:row-reverse;
				display:flex;
			}
			.item{
				background:yellow;
				width:20%;
				height:200px;
			}

flex-wrap属性：
- 取值：nowrap(默认) | wrap | wrap-reverse
- 用于控制项目是否换行，nowrap表示不换行；
  background:pink;
  width:100%;
  height:600px;
  flex-direction:row-reverse;
  display:flex;
  }
  .item{
  background:yellow;
  width:20%;
  height:200px;
  }
flex-wrap属性：
- 取值：nowrap(默认) | wrap | wrap-reverse
- 用于控制项目是否换行，nowrap表示不换行；
flex-flow属性：是flex-deriction与flex-wrap属性的简写集合

柒熠染云

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（二）

第二次培训：开始魔改div一 . div选择器1. class 类<div class="class_name"> <div class="content"></div> <span></span></div>.class_name{ background-color:blue;}.class_name span{ }2. id 身份<div id="id_num">
复制链接

扫一扫