css
谁是听故事的人
白日不到处,青春恰自来。苔花如米小,也学牡丹开。
展开
-
设置div中文字自适应显示一行,超出则用...代替
因为工作原因,需要设置文字自适应显示一行,超出用...代替,因此整理出来巩固记忆。主要依赖的属性如下所示:/* 强制文字一行内显示 */white-space: nowrap;/* 超出部分隐藏 */overflow: hidden;/* 用省略号替代超出部分 */text-overflow: ellipsis;完整代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-10-07 10:21:55 · 2085 阅读 · 0 评论 -
用css将DIV等分布局
在工作中经常会出现需要讲一个div等分为几部分的需求,现整理方法如下:1、借助设置百分比实现均分div,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>将页面平均分成四部分</title> <style type="text/css"> *{ ma原创 2020-10-07 09:57:16 · 8566 阅读 · 0 评论 -
详解CSS3的弹性盒模型
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。属性 ...原创 2020-09-01 11:14:51 · 170 阅读 · 0 评论 -
看了不会你打我的CSS盒模型
目录1、标准盒模型2、IE盒子模型3、总结:1、标准盒模型w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分2、IE盒子模型IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是,IE盒子模型的content部分包含了padding和border3、总结:IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W.原创 2020-09-01 10:55:25 · 152 阅读 · 0 评论 -
详解CSS选择器的类型以及优先级
目录一、CSS选择器的分类1、标签名选择器 2、类选择器 3、ID选择器4、后代选择器(类选择器的后代选择器)5、群组选择器二、选择器的优先级 三、总结一、CSS选择器的分类1、标签名选择器 div{ color:red;} 即页面中的各个标签名的css样式2、类选择器 .divClass{ color:red;}即定义的每个标签的class 中的css样式 3、ID选择器...原创 2020-09-01 10:12:47 · 3286 阅读 · 0 评论 -
用css实现Div的垂直居中
最近面试的时候,经常被问到css中div垂直居中的问题,趁现在整理的方法比较全面,记录下来!外层div大小不定,内层div宽高确定代码如下:<html> <head> <style> #content { width: 600px; height: 400px; ...原创 2020-03-21 15:51:59 · 569 阅读 · 0 评论 -
css中position的详解
position1、定义和用法position 属性规定元素的定位类型。目前所有的浏览器均支持position定位。默认值为static。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。2、取值(1)absolute生成绝对定位的元素,相对于 static 定...原创 2020-03-21 12:41:14 · 319 阅读 · 0 评论