CSS3
文章平均质量分 90
前端分享会
这个作者很懒,什么都没留下…
展开
-
前端复习—CSS篇
什么是BFC定义:在W3C中是这样定义的,浮动元素和绝度定位元素非块级盒子的块级元素(inline-block、table-cells)、以及overflow值不为visiable的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context,即块级格式上下文),也就是说在BFC中的元素如何排列不会影响到BFC之外的元素。触发:浮动元素(float不是none)定位元素(position为abslute或fixed)行内块元素(display为inline-bl.原创 2021-01-24 20:29:26 · 186 阅读 · 0 评论 -
解决img放入标签中上下出现间隙问题
问题描述:今天在写项目的时候突然遇到了这个问题,自己将img放入div中,但是照片顶部并没有和div顶部重合,一开始以为自己设置了边距,找半天没找出原因,下面来分享几种解决这个问题的方法问题分析:对于不是块级元素的可见元素都是内联元素,这里有个注意点就是这些内联元素特性都是“行布局”形式。对于img它是内联元素,他默认的对齐方式都是和他的父元素的baseline去对齐,与此同时你撑开的高度却是元素整体的高度,所以这就会造成间隙。解决方案:1、第一种方式就可以直接将内联元素设置成块级元素(d原创 2020-09-16 19:04:49 · 565 阅读 · 0 评论 -
实现水平垂直居中方法详情
最近做项目时用到了水平垂直居中,一开始有些方法的使用情况还没搞透,就卡的头疼,今天就总结下。实现水平居中1、一般来说实现水平居中最好的办法当然就是margin:0 auto;当然要在宽度固定的情况下。<style type="text/css" rel="stylesheet"> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; marg原创 2020-05-25 14:05:08 · 217 阅读 · 0 评论 -
Sticky footers详解
在网页设计中,Sticky footers设计是最古老和最常见的效果之一,最近在做页面时就遇到了这种情况,在页面足够长时我希望一部分内容一直在页面最底层,当页面不够时会出现滚动条,这时这一部分内容任然固定在最底部。这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,原创 2020-05-18 19:08:07 · 162 阅读 · 0 评论 -
块级元素、行级元素和行级块元素
一、块级元素:block特点:独占一行,可以通过css改变宽高例子:div、p、ul、ol、li、form…二、行级元素:inline特点:内容决定大小,不可以通过css改变宽高例子:span、em、strong…三、行级块元素:inline-biock特点:内容决定大小,可以通过css改变宽高例子:img…三种模式可以通过display相互转换例如span{//转换为块级...原创 2020-04-23 20:51:56 · 221 阅读 · 0 评论 -
CSS属性设置优先级问题
1、内部样式、外部样式、内联样式优先级外部样式<内部样式<内联样式,这个比较好理解,谁距离元素越近,优先级越大,如:<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式,在CSS文件中设置<style type="text/css"> div{color:blue;} //...原创 2020-04-03 20:45:01 · 1149 阅读 · 0 评论 -
解决CSS高度塌陷
什么是高度塌陷?在文档流中,如果父元素没有设置高度父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高,但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。如:<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2020-04-03 20:29:38 · 261 阅读 · 0 评论 -
css3——box-sizing属性
先介绍下box-sizing几个属性:content-box(默认值)border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内来个例子,比如一个div中嵌套三个div(div1,div2,div3)最外面的div宽度为300px,里面三个div宽度都为100px<...原创 2020-04-03 14:10:29 · 139 阅读 · 0 评论