![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS属性
Fade Away
这个作者很懒,什么都没留下…
展开
-
浏览器常用宽高
pageX pageY 到html,body最左侧和最顶部的距离,而不是可视的宽高。html,body{w2000,h2000}此时的pageX 和 pageY 达到了 2014 2010滚动条已经到达最顶端clientX clientYclientX clientY 只能达到1670左右,说明相对浏览器可视宽度offsetX offsetY ???...原创 2019-11-01 16:54:23 · 320 阅读 · 0 评论 -
html,body{ width: 100%;height: 100%;}的解释
按道理,子元素百分比是以父元素为标准,那么问题来了,html有父元素吗?html{ width: 100%;height: 100%;}拿谁的宽高?经过测试,是当前浏览器窗口的大小看图<body> <div onclick="func()">xxx</div> </body&gt原创 2019-03-13 22:37:04 · 11892 阅读 · 0 评论 -
box-shadow
属性讲解:x偏移 y偏移 迷糊效果范围 颜色开搞月晕效果【上下左右都有效果】x偏移 0 y偏移 0 迷糊效果范围 小数值即可 颜色右下角出现阴影:xy偏移为正值即可左上角出现阴影:xy偏移为负值即可四周每一角都设置...原创 2019-03-13 10:27:12 · 1384 阅读 · 0 评论 -
CSS画三角形【border-width】
<style> .triangle_border_up{ width:0; height:0; border-width:30px 30px 30px 30px; border-style:solid; border-color:red gold green hotpink;/*透明 透明 灰*/ margin:40px auto;...原创 2019-03-13 09:36:31 · 566 阅读 · 0 评论 -
关于制作与文字等高和低于文字的border
和文字等高的border设置line-height === font-size先了解一下行高的测量行高是以文字中心为准,向两侧扩展,行高小于字号,也是可以的,看图*************,这里很重要line-height = 0制作高度小于文本高度的边框tips:对于块级元素,未设置高度时,如果内部有内联元素,空的内联元素也行,块级元素高度等于行高tips:当块级元素有高度...原创 2019-03-12 21:31:07 · 905 阅读 · 0 评论 -
百分比宽高的继承问题
提问:假如父元素宽高为百分比,是浏览器的百分200%,子元素设置100%,这是子元素的宽高是浏览器的100%还是200%实践证明是100%原创 2019-03-17 22:49:11 · 415 阅读 · 0 评论 -
p标签absolute之后失去整行的宽度【包裹性】
p标签absolute之后失去整行的宽度 类似于float原创 2019-04-12 18:24:08 · 415 阅读 · 0 评论 -
搜索栏布局方式[二]
原创 2019-04-20 10:50:14 · 537 阅读 · 0 评论 -
元素默认外边距 以及常见宽高属性
bodym8pxul dlmt mb 16pxli dt dd 没有边距原创 2019-04-25 09:16:13 · 1174 阅读 · 0 评论 -
tabel cell 是行内元素无法继承父元素宽高
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .outer { width: 500px; height: 500px; background: aqua; ...原创 2019-07-31 19:06:48 · 693 阅读 · 0 评论 -
图文vertical-align-top是顶部的margin与文本域顶部对齐[证明]
原创 2019-03-15 11:05:36 · 709 阅读 · 0 评论 -
css居中【三】 mrgin-auto 和 absolute 的四个翅膀lbtr
先上条件 lbtr 为0 margin:auto[一般情况下默认为0],但是元素设置lbtr为0,为了满足lbtr为0,只能无限延伸到屏幕,从而达到lbtr为0换句话说,这个元素的外边距也属于这个元素,lbtr度量的是元素的最边缘。懂了这个就尝试一下left:50%这个果然是外边距到左侧50%再用这个效果居中一下再来一个...原创 2019-03-11 12:29:26 · 403 阅读 · 0 评论 -
解决图文底部空隙
上篇提到空隙来源于文本自带的,而且默认基线对齐,导致看起来是图片底部多出来的空隙,如果让文本上去一点,空隙会消掉吗?下面一起试一下这是原图让文本上去其实是通过改变对齐方式就行block元素[这张图片] 底部 是bottom 和 baseline重合的【前提是没有外边距,有外边距就是外边距了】【也有其他情况,暂时不展开】上一篇介绍了baseline的标准位置,现在说一下bott...原创 2019-03-10 16:20:28 · 356 阅读 · 0 评论 -
制作弧形箭头
1.制作准备2.将box2设置成1/4圆得到3.再旋转即可原创 2019-04-10 16:05:33 · 763 阅读 · 0 评论 -
利用skew实现对话框制作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .parallelogram { width: 150px; height: 100px; transform: s...原创 2019-04-10 16:22:45 · 132 阅读 · 0 评论 -
使用外边距设置【块级元素block】元素宽度
对于block元素可以设置外边距相当于间接设置了宽度<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/resetm.css"> <...原创 2019-04-11 15:25:22 · 830 阅读 · 0 评论 -
inline-block元素巨坑
inline-block元素带有文本属性宽高属性,但是,绝对不是块级元素,在使用inline-block,一旦发现排列问题,第一要想到的是他的文本属性导致的,因为文本有字号和行高,会改变这一行的基线位置解决办法:font-size = 0字号为0,基线和其他的线重合,字体高度为0vertical-align: top;改变对齐方式...原创 2019-04-11 17:44:03 · 385 阅读 · 0 评论 -
x的底部是基线,x的中间点不是midde middle在x中心点上方一点
第一条线才是middle第二条线是baseline原创 2019-04-09 13:18:03 · 157 阅读 · 0 评论 -
vertical-align 基线也会变
基线并不是一成不变的,而是对机应变简单说一下三种情况父盒子里面有文本 文本的基线成为父盒子的基线父盒子无文本 设置overflow hidden 父盒子基线在 margin-bottom [基线下移,底部对齐其他inline元素]父盒子无文本 父盒子基线在 margin-bottom这两个盒子没设置margin 相当于margin0 mb 就在框的底部换一些对...原创 2019-03-10 17:48:43 · 253 阅读 · 0 评论 -
shadow[进阶]
shadow不占位置shadow可以有四核属性值: x偏移 y偏移 模糊范围 阴影大小 inset[内阴影]原创 2019-03-15 10:50:06 · 355 阅读 · 0 评论 -
块级元素的line-height 和 height 之间的关系
谈line-height 和 height 对于块级元素的意义问题1 line-height对块级元素生效吗,他不是针对内联元素的属性吗?如何影响块级元素假如 未设置block高度,只设置宽度,block高度将有block里面的inline元素撑开&lt;style&gt; .box{ line-height: 200px; background-color: s...原创 2019-03-10 15:27:12 · 1730 阅读 · 0 评论 -
行内块级元素和文本在同一行显示为什么会有底部边距呢
先上图后来发现是因为另一个属性的原因,叫vertical-align 简称veravera默认属性为baseline 啥是baseline标准是小写x的底部就是baseline,是一条水平线这空隙跟baseline有关系吗肯定是有的下面放图对齐就对齐呗,空隙是谁?是baseline和bottom的距离没有图片的时候可能觉得空隙是应该有的,加了图片发现图片上下不对称,不符...原创 2019-03-10 15:50:46 · 657 阅读 · 1 评论 -
border-top border-left border-right border-bottom
.box{ /* width: 100px; height: 100px; */ width: 0; border-top:50px solid red; border-right:50px solid green; }原创 2019-04-10 15:57:46 · 1177 阅读 · 0 评论