CSS学习
西有长庚
前端爱好者
展开
-
如何利用CSS3实现立方体
CSS3中新增了过渡属性和3D效果,我们可以利用这个实现一个立方体,此处介绍两个属性: perspective,视距,即人眼到屏幕的距离,可以是元素的子元素获得近大远小地效果(潜台词:加给父元素不要加给自己,不然没效果) transform:preserve-3d(默认是flat,2D元素);依旧是加给父元素,让子元素保留3D的位置。只有加了这个属性,元素才能真的算是3D元素 这时候就有疑问,...原创 2019-11-13 19:18:28 · 237 阅读 · 0 评论 -
滑动门效果的实现
滑动门 滑动门常常是用在导航栏中的一种效果,就例如聊天工具中的聊天框,会随着文字的增加而拉长,但是两侧的效果比如尖角并不会变形。 下面介绍两种实现思路 1,三盒子法 思路,将滑动门分成三块,左边放一个背景,右边放一个背景,中间的块用背景水平平铺 如下: <div class="box"> <div class="left"></div> <...原创 2019-11-12 12:46:17 · 686 阅读 · 0 评论 -
CSS中的定位
定位 CSS三种布局机制之一,利用定位可以更方便的实现某些由浮动和标准流不容易实现的效果,比如让元素移动到指定位置 静态定位 position:static; 元素默认的定位就是这个,不能设置偏移,所以是无法用来实现定位布局的 相对定位 position:relative; 配合left:,top:,right:,bottom:属性使用,当然元素偏移是要有一个相对的位置的,就像我们以前学习物理时使...原创 2019-11-11 22:03:42 · 118 阅读 · 0 评论 -
浮动以及清除浮动的常见方法
关于浮动 CSS的布局有三种机制 ,一是标准流,即普通流,所有的元素都属于标准流;二是定位流,三则是定位流 浮动流组最开始是用来实现图文混排的效果,因为浮动元素压不住文字。我们如果只使用标准流来布局,很多效果是无法实现或者说实现起来比较麻烦,比如我们想多个元素拍成一行,又希望这一行的元素之间没有间隙且可以设置宽高,如果只用标准流来实现无疑是比较麻烦的,但是浮动就可以很容易的实现 <div c...原创 2019-11-11 19:48:43 · 166 阅读 · 0 评论 -
CSS中的外边距合并问题(外边距塌陷)
margin margin指外边距,是盒子模型的组成之一(盒子=内容+边框+外边距+内边距),类似于表格中的cellspacing,具体用法如下: 一个值时,指定上右下左的外边距 两个值时,第一个值为上下外边距,第二个值为左右外边距 三个值时,第一个值为上外边距,第二个值为左右外边距,第三个值为下外边距 四个值时,分别对应上、右、下、左四个外边距 也可以单独设置,如margin-left,mar...原创 2019-11-11 10:00:04 · 603 阅读 · 0 评论 -
CSS的三大特性
CSS三大特性 1,层叠性 当相同选择器为某个元素设置了相同属性时,如先给一个盒子设置了红色的背景色,后面又给它设置了绿色的背景色,此时后来设置的会覆盖掉先前设置的背景色,这就是css的层叠性 。 <div></div> <style> div{ width: 100px; height: 100px; background-color...原创 2019-11-10 21:42:44 · 319 阅读 · 0 评论 -
CSS的display的显示属性
display属性 关于display属性,在w3c官方文档中给出的解释是用来定义建立布局时元素生成的显示框类型。我们可以简单理解为定义一个元素应该如何显示 1,none <div class="hide"></div> <style> .hide{ width: 100px; height: 100px; background...原创 2019-11-10 16:28:07 · 547 阅读 · 0 评论 -
CSS的line-height
关于line-height,即行高,大部分学习过css的同学都知道可以利用其来实现单行文本居中,即让盒子高等于行高,便可以实现这个效果,下面来看一下实现原理 行高的组成 行高=上距离+内容高度+下距离 关于基线,我们不要理解成我们平时写的汉字的底部,而是英文子母中如s,h等字母的底部,那一条线称为基线,而类似g,y这种字母底部的那条线称为底线,而两行文字基线于基线之间的距离,就称为行高 让行高等于...原创 2019-11-10 14:41:59 · 207 阅读 · 1 评论 -
CSS的三种引入方式
1,行内式 直接写在html标签中,控制当前标签,对其他标签不起作用 <div style="width:100px;height:100px;">我是盒子</div> <!-- style就是标签的一个属性,css样式写在里面,各样式之间用分号隔开 --> 2,内嵌式 一般写在head标签中,但理论上写在什么位置都可以,可以控制整个页面的样式 <!DO...原创 2019-11-09 09:33:32 · 352 阅读 · 0 评论