css
超级爱喝奶茶~
这个作者很懒,什么都没留下…
展开
-
CSS入门基础知识(十五)——清除浮动
CSS标签入门基础知识浮动(float)清除浮动额外标签法额外标签法也称为隔墙法,是W3C推荐的做法额外标签法会在浮动元素末尾添加一个空的标签。例如< div style = " clear:both " >< /div>,或者其他标签(如 < br />等)优点:通俗易懂,书写方便缺点:添加许多无意义的标签,结构化较差注意:要求这个新的空标签必须是块级元素清除浮动——父级添加overflow可以给父级添加overflow属性,将其属性值设置为hidd原创 2020-11-10 15:53:07 · 135 阅读 · 0 评论 -
CSS入门基础知识(十四)——浮动(二)
CSS标签入门基础知识网页布局常见网页布局浮动布局主义点浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置一个元素浮动了,理论上其余的兄弟元素也要浮动一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防引起问题浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流清除浮动为什么清除浮动由于符集盒子很多情况下,不方便给高度,但是子盒子浮动不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子由于浮动元素原创 2020-11-10 14:25:53 · 130 阅读 · 0 评论 -
CSS入门基础知识(十三)——浮动(一)
CSS标签入门基础知识浮动(float)传统网页布局的三种方式网页布局的本质——用css来摆放盒子。把盒子摆放在相应的位置。CSS提供了三种传统布局方式:1、普通流(标准流)2、浮动3、定位标准流(普通流/文档流)所谓的标准流:就是标签按照规定好默认方式排列1、块级元素会独占一行,从上向下顺序排列2、行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行3、常用元素这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了注意:实际开发中,一个页面基本包含了着原创 2020-11-05 17:38:27 · 189 阅读 · 0 评论 -
CSS入门基础知识(十二)——圆角边框和盒子阴影
CSS标签入门基础知识圆角边框和盒子阴影圆角边框在CSS3中,新增了圆角边框的样式,盒子可以变成圆角了。boder-radius属性用于设置元素的外边框圆角语法:radius半径原理:(椭)圆与边框的交际形成圆角效果例子:注意:1、参数值可以为数值也可以为百分比形式2、如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%3、如果是矩形,设置为高度的一半4、该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角盒子阴影css原创 2020-11-04 17:33:14 · 397 阅读 · 0 评论 -
CSS入门基础知识(十一)——CSS盒子模型(二)
CSS标签入门基础知识CSS盒子模型内边距内边距(padding)属性用于设置内边距,即边距和内容之间的距离。内边距的复合写法:padding简写属性属性可以有一到四个值。注意:内边距一样会影响盒子的实际大小,为保证盒子和效果图保持一致,让高和宽减去多出来的内边距大小即可。如果盒子没有指定盒子宽度高度属性,padding不会撑开盒子的大小。外边距margin属性用于设置外边距,即控制盒子和盒子之间的距离。margin简写方式和padding一样。外边距典型应用:外边距可以让块原创 2020-11-04 12:54:48 · 260 阅读 · 1 评论 -
CSS入门基础知识(十)——CSS盒子模型(一)
CSS标签入门基础知识CSS盒子模型网页布局过程网页布局过程1、先准备好相关网页元素,网页元素基本都是盒子Box2、利用CSS设置号盒子样式,然后拜访到相应的位置3、往盒子里面装内容网页布局核心:利用CSS摆盒子盒子模型(Box Model)组成盒子模型:就是吧html页面的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型本子上是一个盒子,封装周围的html元素,它包括边框、外边距、内边距、和实际内容边框(border)boder可以设置元素的边框边框有三部分组成:原创 2020-11-04 12:33:54 · 179 阅读 · 0 评论 -
CSS入门基础知识(九)——CSS三大特性
CSS标签入门基础知识CSS的三大特性css有三个非常重要的三个特性:层叠性、继承性、优先级。层叠性相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:1、样式冲突,遵循的原则是后来居上,哪个样式离结构近,就执行哪个样式2、样式不冲突,不会层叠继承性一般继承性css中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。1、恰当的使用继承可以简化代码,降低css样式的复杂程度2、子元素可原创 2020-11-03 17:17:36 · 201 阅读 · 0 评论 -
CSS入门基础知识(八)——CSS的背景
CSS标签入门基础知识CSS的背景通过css背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景颜色background-color属性定义了元素的背景颜色一般情况下元素背景颜色默认值是tranparent(透明)背景图片...原创 2020-11-03 15:19:00 · 355 阅读 · 0 评论 -
CSS入门基础知识(七)——元素显示模式
CSS标签入门基础知识元素显示模式元素显示模式就是元素(标签)以什么方式进行显示,比如< div>自己独占一行,比如一行可以放多个< span>html元素一般分为块元素和行元素块元素常见的块元素有< h1>~< h6>、< p>、< div>等等,其中< div>标签是最典型的块元素1、自己独占一行2、高度、宽度、内外边距边距都可以控制3、宽度默认是容器的100%4、是一个容器及盒子,里面可以放行内或者块原创 2020-09-03 09:46:19 · 176 阅读 · 0 评论 -
CSS入门基础知识(六)——复合选择器
CSS标签入门基础知识Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度。快速生成html结构语法1、生成标签直接输入标签名按tab键即可2、生成多个相同标签,加上*即可3、生成父子级关系的标签,可以用>4、生成兄弟关系的标签,可以用+5、生成带有类名的或者id名字的,直接写.demo或者#demo6、生成div类名有顺序,加上自增符号$7、生成标签的内部写内容,用{}表示快速生成css结构语法css基本采取简写形式即可1、比原创 2020-09-02 15:28:58 · 309 阅读 · 0 评论 -
CSS入门基础知识(五)——引入方式
CSS标签入门基础知识CSS引入方式css的三种样式表按照css样式书写的位置(或者引入的方式),css样式可以分为三大类:1、行内样式表(行内式)2、内部样式表(嵌入式)3、外部样式表(链接式)内部样式表内部样式表(内嵌样式表)是写到html页面内部,是将所有的css代码抽出来,单独放到一个< style>标签中。例子:1、内部样式表理论上< style>标签可以放在html文档的任何地方,但一般会放在文档的< head>标签中。2、通过这种方式原创 2020-09-01 17:00:23 · 245 阅读 · 0 评论 -
CSS入门基础知识(四)——文本属性
CSS标签入门基础知识CSS文本属性CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色color属性用于定义文本的颜色。对齐文本text-align属性用于设置元素内文本内容的水平对齐方式。装饰文本text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。例子:删除链接的下划线文本缩进text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。通过设置该属性,所原创 2020-08-31 22:20:24 · 253 阅读 · 0 评论 -
CSS入门基础知识(三)——字体属性
CSS标签入门基础知识CSS字体属性CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文本样式。字体系列CSS使用font-family属性定义文本的字体系列。1、各种字体之间必须使用英文状态下的逗号隔开。2、一般情况下,如果有空格隔开多个的单词组成的字体,加引号。3、尽量使用系统默认自带字体,保证任何用户的浏览器中都能正确显示。字体的大小CSS使用font-size属性来定义大小。1、px(像素)大小是我们网页的最常用单位。2、谷歌浏览器默认的文字大小为16px。3、原创 2020-08-30 01:44:20 · 268 阅读 · 0 评论 -
CSS入门基础知识(二)—— 基础选择器
CSS入门基础知识(二)CSS标签入门基础知识CSS基础选择器CSS选择器的作用选择器的分类标签选择器类选择器类选择器类选择器-多类名id选择器id选择器id选择器和类选择器的区别通配符选择器基础选择器的总结CSS标签入门基础知识CSS基础选择器CSS选择器的作用选择器(选择符)就是根据不同的需求把不同标签选出来。以上css做了俩件事:1、找到所有的h1标签。(选对人)2、设置这些标签的样式,比如颜色改为红色。(做对事)选择器的分类选择器分为基础选择器和复合选择器俩大类。基础选择器:原创 2020-08-11 21:01:14 · 355 阅读 · 0 评论 -
CSS入门基础知识(一)
CSS入门基础知识(一)CSS标签入门基础知识CSS简介html的局限性css-网页的美容师CSS标签入门基础知识CSS简介html的局限性html是非常单纯的,只关注内容的语义。例如:< h1>表明这只是一个大标题,< p>表明这只是一个段落,< img>表明这里有一个图片,< a>表示此处有链接。html可以做简单的样式,但会非常的繁琐。css-网页的美容师css是层叠样式表(Cascading Style Sheels)的简称。也称为c原创 2020-08-10 16:58:28 · 217 阅读 · 0 评论