Css
郭从墨
这个作者很懒,什么都没留下…
展开
-
block,inline和inline-block概念和区别
block,inline和inline-block概念和区别转载 2017-09-06 14:09:19 · 174 阅读 · 0 评论 -
relative布局--块级元素
今天实现一个简单的功能:就是td里面内容超出左边一部分,并覆盖掉左边的边框。一般情况下我是设置外层的父元素为relative,并且设置一个z-index,之后设置里面的元素同样是relative,设置其背景覆盖外层边框即可。但是后来发现文字上面的空白部分一直实现不出来,使用margin-top是无效的,但是我记忆中当元素设置为position:relative之后元素就变成了一个块级元素,...原创 2019-01-21 18:13:08 · 795 阅读 · 0 评论 -
左右两列定宽,中间自适应的方法
1. 使用flex布局<div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right"原创 2018-03-06 15:37:43 · 519 阅读 · 0 评论 -
CSS盒模型的深度思考及BFC
题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型。对于这个题目,我们要回答一下几个方面:(1)基本概念:content、padding、margin。(2)标准盒模型、IE盒模型的区别。不要漏说了IE盒模型,通过这个问题,可以筛选一部分人。(3)CSS如何设置这两种模型(即:如何设置某个盒子为其中一个模型)?如果回答了上面的第二条,还会继续追问这一条。(4)JS如何设置、获取...转载 2018-03-06 11:26:38 · 161 阅读 · 0 评论 -
css3实现一个div设置多张背景图片及background-image属性
CSS3/CSS1 background-image 属性语法:background-image:<bg-image> [ , <bg-image> ]*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-line...转载 2018-03-11 09:47:48 · 3220 阅读 · 0 评论 -
4种方法生成三个并排的大小相等的元素
基本的dom结构如下:div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">ite原创 2018-03-03 17:08:01 · 580 阅读 · 0 评论 -
可以设置inline元素的padding和margin吗?
对于这个问题,我的第一感觉就是不能,后来查看资料才知道原来我把inline元素设置了width和height无效和题目搞混了,经过查资料和实际验证后,得出以下结论: 1. inline元素设置width,height属性无效 2.inline元素的padding和margin可以设置,但是水平方向的padding-right,padding-left,margin-right,marg...原创 2018-03-06 23:00:10 · 4049 阅读 · 0 评论 -
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念,并且在转载 2018-02-06 22:42:16 · 209 阅读 · 0 评论 -
换行属性
通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。white-space 属性设置如何处理元素内的空白。值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本...原创 2018-02-12 10:02:35 · 207 阅读 · 0 评论 -
css选择器的权重
id选择器权重100class类,伪类选择器10类型选择器和伪元素 1子选择器,通配符,相邻同胞选择器0原创 2018-02-12 09:51:53 · 188 阅读 · 0 评论 -
如何实现多行文字实现超不部分显示省略号的效果
p{ text-overflow: ellipsis; display:-webkit-box; -webkit-box-orient:vertical;/*horizontal*//*子元素的排列方式*/ -webkit-line-clamp:3;/*显示的行数*/ display:-moz-box; -moz-box-orient:ve原创 2017-09-09 18:49:08 · 225 阅读 · 0 评论 -
css中常见的At-rule
1. @chatset,用来提示css文件使用的字符编码方式,其一般在外部样式表文件中使用,如果它被使用,必须出现在最前面。该规则后面的分号是不可省略的,如果省略了该分号,会生成错误信息。使用方式:@charset<charset>;一般常用的编码方式有两个,世界统一编码:utf-8,中文编码:gb23122. @import,用来引入一个css文件,除了@chars...原创 2019-02-25 19:26:14 · 694 阅读 · 0 评论