css
学前端的菜鸟
还在学习前端的菜鸟
展开
-
用CSS实现一个三角形
废话不多说,直接上例子div{width: 0;height: 0;border-top: 100px solid black;border-bottom: 100px solid red;border-left: 100px solid #008c8c;border-right: 100px solid yellow;}<div></div>效果如下...原创 2020-03-14 21:06:06 · 244 阅读 · 0 评论 -
堆叠上下文
概念堆叠上下文,是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在Z轴上排列的先后顺序。创建堆叠上下文的元素1.html元素(根元素)2.设置了z-index(非auto)数值的定位元素排列顺序从后到前:1.创建堆叠上下文的元素的背景和边框2.堆叠级别(z-index)为负值的堆叠上下文3.常规流非定位的块盒4.非定位的浮动盒子5.常规流非定位行盒6.任何z-in...原创 2020-03-14 20:52:16 · 434 阅读 · 0 评论 -
浮动的细节
盒子的位置左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的顶边不能高于上一个盒子的顶边若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能够容纳盒子,然后再向左或向右移动示例div{text-align: center;}.container{width: 1000px;height: 1000px;border: 1px solid black;...原创 2020-03-13 21:35:38 · 83 阅读 · 0 评论 -
块级格式化上下文BFC
定义块级格式化上下文又叫BFC,它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局布局规则1.常规流块盒在水平方向上,必须撑满包含块2.常规流块盒在包含块的垂直方向上依次摆放3.常规流块盒若外边距无缝相邻,则进行外边距合并(以数字大的为准,只有margin-top和margin-bottom会合并)4.常规流块盒的自动高度和摆放位置,无视浮动元素.child{width:...原创 2020-03-13 19:51:09 · 104 阅读 · 0 评论 -
隐藏元素的三个属性,以及他们的区别
隐藏元素1.display:none2.opacity:03.visibility:hidden三种方法都可以从视觉上隐藏元素,但是他们之间是有区别的。例子//基础样式.demo{width: 100px;height: 100px;background-color: red;}.test{width: 100px;height: 100px;background-c...原创 2020-03-12 21:17:40 · 598 阅读 · 0 评论 -
css浮动
浮动应用场景文字环绕横向排列img{width:300px;height:300px;float:left;}浮动的基本特点修改float属性值为:left:左浮动,元素靠上靠左right:右浮动,元素靠上靠右当一个元素浮动后,元素必定为块盒(更改display属性为block)浮动元素的包含块,和常规流一样,为父元素的内容盒盒子尺寸宽度为auto...原创 2020-03-12 20:58:54 · 94 阅读 · 0 评论 -
垂直水平居中元素的几种方法
水平垂直居中1.知道自身的宽高<style> .wrapper{ width: 500px; height: 500px; border: 1px solid red; position: relative; } .child{ ...原创 2020-03-12 20:48:42 · 85 阅读 · 0 评论 -
css行盒的盒模型
常见的行盒包含具体内容的元素span、strong、em、i…特点1.盒子沿着内容延伸2.行盒不能设置宽高调整行盒的宽高,应该使用字体大小、行高、字体类型等等间接调整。3.内边距(填充区)水平方向有效,垂直方向不会实际占据空间4.边框水平方向有效,垂直方向不会实际占据空间5.外边距水平方向有效,垂直方向不会实际占据空间。行块盒1.不独占一行2.盒模型中所有尺寸都有效...原创 2020-03-12 20:21:52 · 86 阅读 · 0 评论 -
css属性值的计算过程
属性值的计算过程一个元素的属性值从无到有需要经过几个过程1.确定声明值2.层叠冲突3.使用继承4.使用浏览器定义的默认值如果想知道什么是层叠冲突,可以看看我的上一篇文章层叠冲突和选择器优先级...原创 2020-03-09 21:09:54 · 159 阅读 · 0 评论 -
选择器的优先级
层叠如果有几种不同的方法选中同一个元素,并且为它添加样式,那么它到底会采用哪一个样式呢?如:<style> #idiv{ width: 100px; height: 100px; background-color: red; } .cdiv{ ...原创 2020-03-09 21:00:04 · 276 阅读 · 0 评论 -
页面中如何引入css
css作用页面的几种方式1.内部样式表书写在style中2.内联样式表,元素样式表直接书写在元素的style属性中3.外部样式表[推荐]将样式书写到独立的css文件中(1)外部样式可以解决多页面样式重复的问题(2)有利于浏览器缓存,从而提高页面响应速度(3)有利于代码分离(html和css),更容易阅读和维护<link rel="stylesheet" href="ind...原创 2020-03-08 16:47:28 · 881 阅读 · 0 评论 -
css中的定位
关于定位视觉格式化模型,大体上将页面中的盒子的排列分为三种方式:1.常规流2.浮动:float3.定位:position定位:手动控制元素在包含块中的精准位置position属性默认值: static,静态定位(不定位)relative:相对定位absolute:绝对定位fixed:固定定位一个元素,只要position的取值不是static,我们就认为该元素是一个定位元素...原创 2020-03-08 15:59:43 · 111 阅读 · 0 评论