css
css基础
御坂御坂Matlab工作室
喜爱编程,喜爱游戏设计,喜爱动漫
展开
-
清除浮动
文章目录为什么要清除浮动清楚浮动的本质清除浮动的方法清除浮动总结为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。总结:由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。准确的说,并不是清楚浮动,而是清楚浮动后造成的影响。清楚浮动的本质清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清楚浮动后,父级就会根据浮动的盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。清除原创 2020-10-21 11:00:44 · 175 阅读 · 0 评论 -
浮动
文章目录1.CSS布局三种机制2.为什么需要浮动什么是浮动浮动(float)小结浮动(float)的应用浮动(float)的扩展1.CSS布局三种机制网页布局的核心———用CSS来摆放盒子CSS提供了三种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中1.普通流(标准流)块级元素会独占一行,从上向下顺序排列:常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序进行排列,碰到父元素边缘则自动换行常用元素:span、a、原创 2020-10-20 16:14:50 · 152 阅读 · 0 评论 -
圆角边框和盒子阴影
圆角边框语法:border-radius:lenth;其中每一个值可以为数值或百分比的形式技巧:让一个正方形变成圆圈border-radius:50%;以上效果图矩形的圆角,就不要用百分比了,因为百分比是表示高度和宽度的一半而我们这里矩形就只用高度的一般就好了。精确单位盒子阴影语法:box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影前两个属性是必须写的。其余可以省略外阴影(outset)是默认的但是不能写 想要内阴影可原创 2020-10-19 16:52:25 · 146 阅读 · 0 评论 -
盒子模型(Box Model)
盒子模型:把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器原创 2020-10-19 13:14:23 · 694 阅读 · 0 评论 -
CSS注释
CSS注释规则/*需要注释的内容*/例如:<style> /*所有的字体是14像素大小*/ p{ font-size: 14px; }</style>原创 2020-10-19 10:54:19 · 98 阅读 · 0 评论 -
CSS三大特性
1.CSS层叠性概念:所谓层叠性是指多种CSS样式相加是浏览器处理冲突的一个能力,如果一个属性通过两个相同的选择器设置到同一个元素身上,那么这个时候一个属性就会将另一个属性层叠掉。原则:样式冲突:遵循的原则是就近原则。哪个样式离结构近,就执行那个样式。样式不要冲突,不会重叠。2.CSS继承性概念:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父元素即可。简单理解:子承父业注意:恰当的使用继承可以简化代码,降低CSS的复杂性。比如有很多原创 2020-10-19 10:50:59 · 166 阅读 · 0 评论 -
CSS背景(background)
1.背景颜色语法:<style> background-color: 颜色值; 默认的值是transparent 透明的</style>2.背景图片语法:<style> background-image: url(images/demo.png);</style>小技巧:我们提倡背景图片后面的地址,url不要加引号3.背景平铺(repeat)语法:<style> background-repeat: repea原创 2020-10-18 22:52:58 · 271 阅读 · 0 评论 -
行高那些事儿(line-height)
1.行高测量行高测量方法:2.单行文本垂直居中行高我们利用最多的一个地方:可以让单行文本在盒子中垂直居中对齐。文字的行高等于盒子的高度这里情况些许复杂,开始学习,我们可以从简单地方入手学会行高=上距离+内容高度+下距离上距离和下距离总是相等的,因此文字看上去是垂直居中的行高和高度的三种关系如果 行高 等 高度 文字会 垂直居中如果 行高 大于 高度 文字会 偏下如果 行高 小于 高度 文字会 偏上...原创 2020-10-18 22:29:24 · 127 阅读 · 0 评论 -
标签显示模式(display)
标签显示模式(display)1.什么是标签显示模式什么是标签显示模式?便签以什么方式进行显示,比如div自己占一行,比如span一行可以放多个作用:网页种标签很多,不同地方用到不同标签,以更好完成网页标签类型HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素2.块级元素(block-level)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中原创 2020-10-18 22:19:25 · 373 阅读 · 0 评论 -
CSS复合选择器
CSS复合选择器1.后代选择器概念:后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代写法:将外层标签写在前面,内层标签写在后面,中间用空格分隔。父级 子级{属性:属性值;属性:属性值;}<style> .class h3{ color: red; font-size: 16px; } </style>当标签发生嵌套时,内层标签就成为外层标签的后代子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。2.子元素选择原创 2020-10-18 17:39:01 · 606 阅读 · 0 评论 -
CSS外观属性
CSS外观属性1.color:文本颜色作用:color属性用于用于定义文本的颜色取值方式有3种表示 属性值预定义的颜色值 red、green、blue十六进制 #FF0000、#FF6600,#29D794RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)注意:实际工作中,16进制写法最多,更喜欢用简写的方式比如#f00代表红色2.text-align:文本水平对齐方式作用:text-align属性用于设置文本内容的水平对齐,相当于html种的al原创 2020-10-18 17:02:40 · 307 阅读 · 0 评论 -
font字体
font字体1.font-size:大小作用:font-size属性用于设置字号p{ font-size: 20px;}单位:可以使用相对长度单位,也可以使用绝对长度单位相对长度单位较常用,推荐使用像素单位px,绝对长度单位使用较少注意:文字大小一般使用px谷歌浏览器默认文字大小为16px不同浏览器默认显示字号大小不一致,应尽量给一个明确的大小,不要默认大小。一般body指定整个页面文字大小。2.font-family:字体作用:font-family属性用于设置使用哪一原创 2020-10-18 16:32:07 · 4280 阅读 · 1 评论 -
CSS基础选择器
CSS基础选择器1.标签选择器概念:标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。语法:标签名{属性:属性值1; 属性2:属性值2;}作用:标签选择器,可以把某一类标签全部选择出来,比如所有的div标签和所有的span标签优点:是能快速为页面中同类型的标签统一样式缺点:不能设计差异化样式2.类选择器类选择器使用"."进行标识,后面紧跟类名语法:.类名{ 属性1:属性值1; 属性2:属性值2;}标签&原创 2020-10-18 15:47:58 · 254 阅读 · 0 评论 -
CSS样式表书写位置
css样式书写位置1.行内式(内联样式)概念:称行内样式,行间样式其基本语法格式如下:是通过标签的style属性来设置元素的样式语法:<标签名 style="属性:属性值1; 属性2:属性值2; 属性3:属性值3;">实际上任何html标签都有style属性,用来设置行内式缺点:没有实现样式和结构相分离2.内部样式表(内嵌样式表)概念:称内嵌式将CSS代码集中写在HTML文档的head头部标签中,并用style便签定义语法:<head> <met原创 2020-10-18 15:06:06 · 603 阅读 · 0 评论