![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css笔记
courageFei
这个作者很懒,什么都没留下…
展开
-
css定位
CSS定位css中的块级元素与行内元素css中的块级元素:div p h1 h2 h3 h4 h5 h6 li dt dd … 在标准文档流中,块级元素就是指要单独占一行。狂傲内外边距都可以依据自己的需要来自由设置。其中的内容占宽与实际宽度无关。块级元素可以包含块级元素与行内元素。css中的行内元素:span a u b em sub sup input… 在标准...原创 2018-04-19 18:12:57 · 139 阅读 · 0 评论 -
清除浮动
1. 给盒子增加适当高度当一个浮动元素被包含在另一个元素中,包含的元素没有高度就会被另外的浮动元素影响,如果这个和另一个元素有高度的话,浮动元素就不会互相受影响。2 .清除法clear清除的属性有clear:left;清除左边的浮动),clear:right;(清除右边的浮动),clear:both;(清除所有浮动),clear:none;(默认状态)。用清除法会导致元素的外边距(...原创 2018-04-21 20:55:58 · 245 阅读 · 0 评论 -
css中常用的属性(1)
css内边距 内容与边框之间的距离是内边距。控制内边距大小就是padding属性。padding:10px;(上右下左边距均为10px)padding:10px 20px;(表示上下内边距10px 左右边距20px)padding:10px 20px 30px;(表示上边距10px 右边距20px 下边距30px 左边距同右)padding:10px 20px 30px 40p...原创 2018-05-04 22:50:14 · 292 阅读 · 0 评论 -
CSS——run-in元素
run-in元素run-in元素是一个块/ 行内元素混合,可以使某些会计元素成为下一个元素的行内部分。对于标题效果比较有用,就是可以将标题作为文本段落的一部分出现。在css中,只需要改变元素的display值,并让下一个元素作为块级元素框,就可以使元素成为run-in元素。如果一个元素生成run-in框,那么该框后面是一个块级框,那么该run-in元素将成为块级框开始处的一个行内框。r...原创 2018-05-26 11:25:55 · 3010 阅读 · 0 评论 -
CSS——内容剪裁与元素可见性
内容剪裁如果一个绝对定位元素的内容溢出其内容框,而且overflow设置为要求剪裁该内容,通过使用clip可以改变剪裁区域的形状。默认值auto表示元素的内容不应剪裁,还可以相对于元素内容区定义一个剪裁形状。这不会改变内容区的形状,而只是改变将显示内容的区域形状。clip的值有rect(top,right,bottom,left)、auto、inherit。初始值是auto。应用于绝...原创 2018-05-27 16:41:40 · 594 阅读 · 0 评论 -
边框1像素的多个盒子并在一起相邻部分变成2像素的问题
1像素多个盒子边框并在一起变成2像素的问题假设需要多个盒子。盒子边框的像素都为1,但是将这几个盒子并列放在一起会导致相邻的部分变为2像素,此时不想要2像素,想让边框变为1像素,该如何解决呢?下面本人附上代码截图,并且适当说明原因。本人在此用了5个盒子做示范,五个盒子浮动的时候会并在一起,导致相邻部分变为2像素。如下图所示: 解决此问题需要两个关键点:margin-lef...原创 2018-07-25 20:15:16 · 1118 阅读 · 0 评论 -
CSS------元素隐藏显示
常见的三种元素显示隐藏- display(英文显示的意思)设置元素的可见block(也有转为块元素的意思)与不可见none(隐藏对象)display元素设置的隐藏就相当于这个元素没有存在过一样在页面中彻底消失,不会有它占有的位置。 -visibility(能见度,可见性,可见度,能见)它的属性值由visible:对象可见,默认状态就是可见。另一个属性hidden;不可见,元素虽然...原创 2018-07-25 20:38:50 · 180 阅读 · 0 评论 -
get CSS 三角与单行溢出文字的省略号显示
CSS三角CSS中的边框是以中心为点连接四个角的,所以她的边框是斜角的,这就为三角形的制作做了铺垫。如下图所示,制作的小三角:制作三角的三个步骤: 1. 将盒子的宽度于高度设置为0 2. 将四个边框都写出,写上自己所需要的三角的高度即可。四个边需要分开写,留下需要的那个方向的,其余的颜色改为透明(transparent)就可以啦~ 3. 对于低版本的浏览器加上**`...原创 2018-07-26 08:33:03 · 177 阅读 · 0 评论 -
CSS中的精灵技术
CSS中的精灵技术在制作网页的过程中我们会用很多个细碎的小图,每当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。由于网页中细碎的小图片很多,会导致向服务器发送N多次请求,这样不仅降低了页面的加载速度,也会影响服务器的效率。**为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。聪明机智的前辈们研究出了CSS精灵技术(也称CSS ...原创 2018-07-29 11:45:03 · 5387 阅读 · 0 评论