css
喜欢白朴
简简单单的内向程序猿
展开
-
鼠标移动出现小手与溢出部分以省略号显示
1、鼠标移动显示小手只需要在需要的标签内添加 `cursor: pointer` 这个属性就行了2、以省略号显示首先,我们需要给标签定宽<style> p{ width: 63px; // 定宽 overflow: hidden; // 溢出部分隐藏 white-space:nowrap; // 有些标签会自动换行,这个是禁止自动换行 text-overflow:ellipsis; // 使溢出部分以省略号显示,原创 2022-04-11 15:30:09 · 733 阅读 · 0 评论 -
H5与SCC3的新特性
CSS3一、css3新特性css3中新增的特性:选择器,背景和边框属性,文本效果,2D/3D转换1. 选择器常规选择器:last-child / 选择元素最后一个 /:first-child / 选择元素第一个 /:nth-child(1) / 选择第几个,写1就是第一个 /:nth-child(even) / 按照偶数进行选择 /:nth-child(odd) / 按照奇数进行选择 /:disabled / 选择每个被禁用的dom元素 /:checked / 选择每个被选中的dom元原创 2022-01-11 19:17:32 · 606 阅读 · 0 评论 -
link与@import的不同
1、 link属于html标签。@import在css中使用表示导入外部样式表;2、 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;3、 link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,老版本浏览器(IE5之前)不能识别;4、 link方式的样式的权重 高于@import的权重;5、link 支持使用javascript改变样式 (document.styleSheets),后者不可...原创 2022-01-11 16:53:05 · 113 阅读 · 0 评论 -
行内元素 、块级元素 、空元素标签、src与href的区别
行内元素 :span b a s i img input select strong块级元素 :div h1-h6 p ul ol li dl dt dd table from空元素 : br hr img link meta input原创 2022-01-11 16:16:22 · 244 阅读 · 0 评论 -
两栏,三栏布局,圣杯、双飞翼布局
1、两栏布局左侧固定,右侧自适应css 样式.box{display: flex;width: 100%;height: 500px;}.left{width: 200px;height: 100%;background-color: blue;}.right{width: calc(100% - 200px);height: 100%;background-color: red;}html 代码 <div class="box">原创 2022-01-10 21:27:24 · 138 阅读 · 0 评论 -
flex 布局
什么是flexFlex 是 Flexible Box 的缩写,意思是"弹性布局",可以给盒模型提供最大的灵活性。flex 的一些常用方法flex-directionflex-direction属性决定主轴的方向(即项目的排列方向)row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。flex-wrap属性可以控制是否换行n原创 2022-01-08 10:54:32 · 85 阅读 · 0 评论 -
元素居中的方式
如何让盒子居中第一种父相子绝第二种弹性盒.father{ width: 300px; height: 300px; background-color: aqua; display: flex; justify-content: center; align-items: center; } .seed{ width: 100px; height: 100px原创 2022-01-07 21:27:23 · 488 阅读 · 0 评论 -
position 定位
1、position: static是position的默认值 意思的没有定位也可以理解为清除定位2、position: relative相对定位给元素设置相对于原本位置的定位,元素并不脱离文档流,原本的位置会被保留,其他的元素位置不会受到影响。3、position: absolute绝对定位设置时注意子绝父相,就是给子元素设置绝对定位时也不要忘了给他的父级元素设置相对定位。如果没有给父盒子设置相对定位的话,他就会一层一层向上找,直到找到body到这时他就会基于body进行定位原创 2022-01-07 21:13:44 · 523 阅读 · 0 评论 -
css清除浮动 常用的方法
清除浮动主要是为了解决子元素浮动导致父盒子高度为0的问题清除浮动的方法1.第一种额外标签法 : 给谁清除浮动,就在其后额外添加一个空白标签 。 <div class="home"> <div class="first">first</div> <div class="second ">second </div> <div class="clear">额外标签法</div> .原创 2022-01-05 16:07:34 · 219 阅读 · 0 评论 -
css盒模型
盒模型什么是盒模型?在HTML页面中每一个元素都可以被看作是一个盒子盒模型 分为 标准盒模型 和 怪异盒模型标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)盒模型之间的转换box-sizing:content-box; 将采用标准模式的盒子模型标准b原创 2022-01-05 15:31:39 · 130 阅读 · 0 评论 -
css 样式初始化
创建一个css文件文件内写上重置样式,并在全局引入html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i,原创 2022-01-04 16:57:57 · 169 阅读 · 0 评论