CSS+ DIV布局

本文介绍了CSS+DIV布局的基础概念,包括HTML和CSS的作用,以及DIV作为块元素的角色。讨论了行内元素和块元素的特性,以及如何通过display属性切换元素的显示方式。此外,还涵盖了CSS选择器的使用,如id、class和标签选择器,以及群组选择器。文章详细阐述了盒子模型,并提到了浮动元素的概念和清除浮动的方法,最后简要提及了列表项的CSS样式设计和定位技术的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS+DIV 基本介绍:

html 是用来在浏览器显示的,css是用来控制html 样式的,使HTML样式和内容分离,div 是html 里的一个元素,div 可定义文档中的分区或节,div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。用CSS来任意控制其位置,实现定位。

块元素和行内元素

行内元素,又叫内联元素,内联元素只能容纳文本或者其他内联元素。
常见内联元素: span a,input,img
特点是:只占内容的宽度,默认不换行,行内元素一般放文本或者其它的行。
块元素一般都从新行开始,可以容纳文本,其它内联元素和其它块元素,即使内容不能占满一行,块元素也要把整行占满。

常见块元素:div p
特点是:不管内容有多少,都要换行,同时占满整行,块元素可以放文本,行内元素,块元素。

注意事项:
1、一些css属性对行内元素不生效,例如margin,left,但是这个是于浏览器版本类型有关的。
2、div就是块元素,那么就拥有块元素的一切特性。

如果我们希望一个元素按照块元素的方式显示,则: display:block;
如果我们希望一个元素按照行内元素的方式显示,则: display:inline;

CSS 选择器:

id 选择器:为标有特定 id 的 HTML 元素指定特定的样式。

#para1
{
    text-align:center;
    color:red;
}

class 选择器:用于描述一组元素的样式,class可以在多个元素中使用。

.center {text-align:center;}

标签选择器

<style>
h3{
    color:red;
}
</style>

直接在标签内部写css 代码

<h3 style="color:red;">旅游网站</h3>

群组选择器:如果有多个类/id选择器,它们都有相同的部分,我们可以把相同的css样式放在一起,用,隔开

.ad_stu,.ad_2,.ad_house{
width :152px;
float:left;
}

父子选择器:在已定义类或者ID选择器的标签中,采取递进的方式对子孙元素定义样式

#style2 span{
     font-style:italic;
     color:red;
}

盒子模型
这里写图片描述
说明:
1、任何一元素都可以看做是一个盒子。
2、嵌套盒子模型的参照物不一样,则使用的属性不一样。外层盒子的panding等价于内层盒子的margin。
3、padding值过大会改变盒子的大小,margin值过大会挤到盒子外面,但盒子并没有变化。
4、如果不想破坏盒子模型的整体外观的话,尽量少使用padding。

Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

浮动

什么是浮动?
div纵向排列,但是有时候需要它横向排列,这时候就能用浮动,让块级元素排列在一行上。

元素怎么浮动?
浮动分为走浮动,右浮动,会使元素向左或向右移动,其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

清除浮动:
元素浮动之后,周围的元素会重新排列,但有时候不想让周围的元素也跟着浮动,这时就需要使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

列表项:

使用css 对html 里的列表ul 很容易设置样式,html 里面很多地方都可以使用列表ul来写

<h3><span>今日推荐</span></h3>
            <ul>
                <li><a href="#"><img src="../Content/images/tuijian1.jpg"></a></li>
                <li><a href="#">喀纳斯河</a></li>
                <li><a href="#"><img src="../Content/images/tuijian2.jpg"></a></li>
                <li><a href="#">布尔津</a></li>
                <li><a href="#"><img src="../Content/images/tuijian3.jpg"></a></li>
                <li><a href="#">天山之路</a></li>
            </ul>

定位:

这里写图片描述

下面是设计的网页:
这里写图片描述

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诗琪小姐姐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值