300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > CSS选择器 盒子模型及浮动

CSS选择器 盒子模型及浮动

时间:2022-12-04 18:45:20

相关推荐

CSS选择器 盒子模型及浮动

文章目录

前言 一、CSS选择器1.基础选择器2.复合选择器 二、CSS盒模型1.组成2.圆角边框3.盒子阴影4.文字阴影 三.浮动1.浮动特性2.清除浮动 总结

前言

经过一段时间web前端的学习,我大致了解了CSS的作用,CSS是层叠样式表(Cascading Style Sheets)的简称。

CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

一、CSS选择器

1.基础选择器

基础选择器分为4个选择器:

1.标签选择器:用HTML标签名称作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式。

2.类选择器:如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

语法:

结构需要用class属性来调用class类的意思。

在CSS中,类选择器用一个点“.”号显示。

可以多次调用。

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

HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。

只能调用一次,别人请勿使用。

4.通配符选择器:在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。

通配符选择器不需要调用,自动就给所有的元素使用样式。

注意:在类选择器中,有多类名选择器:

1.可以把一些标签元素相同的样式(共同的部分)放到一个类里面。

2.这些标签都可以调用这个公共的类,然后再调用自己独有的类。

3.从而节省CSS代码,统一修改也非常方便。

2.复合选择器

复合选择器分为5个选择器:

1.后代选择器:又称包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:元素1 元素2 { }

元素1时父级,元素2是子集。

2.子选择器:子元素选择器只能选择作为某元素的最近一级子元素,

元素1>元素2

元素1和元素2中间用大于号隔开

3.并集选择器:可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。

各选择器用英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

4.交集选择器:交集选择器又两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,语法如;h3.class{color:redd font-size:25px;}(不加空格)

5.伪类选择器:伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。

二、CSS盒模型

1.组成

css盒模型由4个部分组成

1.边框border:border-width:定义边框的粗细,单位是px

border-style:边框的样式

border-color:边框的颜色

边框简写:

border:1px solid red;没有顺序

边框分开写法:

border-top 只设定上边框

border-bottom 只设定下边框

border-right 只设定右边框

border-left 只设定左边框

2.内边距padding:padding属性用于设置内边距,即边框与内容之间的距离。

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

3.外边距margin:margin属性用于设置外边距,即控制盒子和盒子之间的距离。

margin-left 左外边距

margin-right 右外边距

margin-top 上外边距

margin-bottom 下外边距

4.内容content:文本里面的内容

代码如下(示例):

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #b0b0b0;margin: 0 6px 0 15px;}</style></head><body><div class="box"><img src="../images/box.png" alt=""><p class="review"><a href="#">快递牛,整体不错蓝牙可以说秒连。红米给力</a></p><div class="appraise">来自于32135489的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span>99元</span></div></div></body></html>

效果如下:

2.圆角边框

border-radius属性用于设置元素的外边框圆角

语法:border-radius:length;

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果。

参数值可以为数值或百分比的形式。

如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%。

如果是个矩形,设置为高度的一半就可以做。

该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。

分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

3.盒子阴影

h-shadow 必写,水平阴影的位置。允许负值。

v-shadow 必写,垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。

inset 可选。将外部阴影改为内部阴影。

默认的是外阴影,但是不可以写这个单词,否则导致阴影无效。

盒子阴影不占用空间,不会影响其他盒子排列。

4.文字阴影

text-shadow:

h-shadow 必写。水平阴影的位置。允许负值。

v-shadow 必写。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color 可选。阴影的颜色。

三.浮动

1.浮动特性

1.浮动元素会脱离标准流(脱标)

脱离标准普通流的控制移动到指定位置

浮动的盒子不再保留原先的位置

2.浮动的元素会一行内显示并且元素顶部对齐

注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

3.浮动的元素会具有行内块元素的特性

如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定

浮动的两个注意点

1.浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。

2.一个元素浮动了,理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

2.清除浮动

清除浮动的本质是清除浮动元素脱离标准流造成的影响

为什么需要清除浮动

1.父级没高度

2.子盒子浮动了

3.影响下面布局了,我们就应该清除浮动了

总结

以上就是今天要讲的内容,本文仅仅简单介绍了CSS的使用,而CSS还有很多知识需要慢慢去学习,希望大家在学习的道路上一起进步,谢谢观看。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。