CSS+HTML
文章平均质量分 90
做一个不秃头的程序员
一名既宅又喜欢流浪(旅游)的90后程序媛
展开
-
少见又好用的css属性
overlay属性 img图片变形如何处理 object-fit原创 2023-05-31 21:08:39 · 308 阅读 · 0 评论 -
如何精确的设置行与行之间的间距
这是一篇专门针对 刚入门 前端的小白们,作为个前端开发人员,我们应该要具备的就是 99.9%的还原设计图,那么必不可少的就是设置页面中文字的上下间距问题,也是刚入门的人员比较难的一个点,怎样才可以写的跟设计图的一模一样呢。比如这样的一个图片,里面有几种字体大小和行间距都不一样,算是一个比较复杂一点的:以下我介绍两种设置这个间距的方法:1.只用line-height(行高)使用行...原创 2020-02-23 18:20:57 · 5220 阅读 · 0 评论 -
css中BFC
一、块级格式化上下文 (Block Formatting Context)BFC是一个独立的布局环境,其中的元素布局是不受外界的影响。二、BFC的布局规则1、内部的Box会在垂直方向,一个接一个地放置。2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box会发生margin重叠。3、每个元素的margin box的左边, 与包含块(元素的父节点)border...原创 2018-09-03 20:15:42 · 353 阅读 · 0 评论 -
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、给父元素设置的属性:1、display:flex 表示给这个盒子设置为弹性盒模型2、...原创 2018-09-03 20:28:14 · 225 阅读 · 0 评论 -
css常见的bug及解决办法
1、图片在IE6及以下有边框 解决:给img{border:0 none}2、div插入图片有间隙 解决:(1)div{font-size:0} (2)img{display:block}3、双倍浮向,在IE6及以下版本,浮动的元素,有设置margin,出现双倍外边距。 解决:给浮动的元素设置display:inline4、在IE6及以下版本,部分块级元素拥...原创 2018-09-03 20:36:37 · 540 阅读 · 0 评论 -
css中选择符
1、基本选择器:1. *——通配符(不建议使用)2. E——标签(元素),也是我们之前类型选择器3. . + class名——类选择器4. # + id名——id选择器5. 选择器1,选择11器2 —— 群组选择器2、关系(层级)选择器1.E F 包含选择器 —— E父元素,F后代元素,满足F是E的后代,而且一定要F元素2.E>F 满足F是E子代元素(不包括子...原创 2018-09-03 20:42:46 · 220 阅读 · 0 评论 -
如何使文本出现省略号
当文字太多,而我们不需要展示那么的时候就会出现省略号是常见的需求,那么出现省略号怎么实现呢?第一种,单行文本出现省略号;就是使用text-overflow:ellipsis属性和属性值,还要一定要配合white-space:nowrap;表示不换行,overflow:hidden;溢出隐藏,当然也得你哈的文字超过你的宽度才行div { height: 30px; w...原创 2018-09-13 18:03:35 · 588 阅读 · 0 评论 -
css中相关单位(px,%,em,rem,vw,vh,vm)的区别
随着web时代发展和html5的出现,前端对网页的要求越来越高了,网页设计单位是涉及到我们布局的效果,使用不同的单位会对最终的结果,会有不同的表现和效果。现在大部分的项目需求都是需要响应式设计,需要去适配各种设备,比如:电脑,手机,平板。如果单位不合适,那么有可能在这个设备布局效果是正常的,另一设备布局效果错乱,就会得不到很好的适配,所以我们需要选择合适的单位来适配各种设备。接下来简单的介...原创 2019-05-22 00:15:46 · 1584 阅读 · 0 评论