CSS
关注
分享
扫一扫
靡_初
自古立大志者，不惟有超世之才，亦必有坚韧不拔之志。
展开
-
利用CSS3新属性解决border和padding会撑大盒子实际大小的问题
CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：box-sizing:content-box 盒子大小为width + padding+ border（以前默认的）box-sizing:border-box盒子大小为width如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border原创 2021-04-13 21:06:33 · 2909 阅读 · 0 评论 -
CSS初始化，重设浏览器样式
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。简单理解：CSS 初始化是指重设浏览器的样式。把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码的时候出现乱码问题。比如：黑体 \9ED1\4F53宋体 5B8B\4F53微软雅黑 \5FAE\8F6F\96C5\9ED1京东网站初始化样式* { /* 内外边距清零 */ margin: 0; paddin原创 2021-04-13 16:06:16 · 230 阅读 · 0 评论 -
CSS元素全部设置边框后间隙变宽（边框没有盖住或合并）
margin负值运用浮动的盒子设置边框，相邻的地方不会重合，所以如果给这些盒子设置1px的边框那么相邻盒子之间就会有2px的边框样式，只要给后面的盒子设置margin-left设置-1px，就会消除相邻边框的这种情况。<body> <ul> <li></li> <li></li> <li></li> <li></li&原创 2021-04-09 19:30:37 · 707 阅读 · 0 评论 -
CSS原生分页样式
制作分页样式可以利用行内块元素的特点实现（不使用浮动）<body> <div class="box"> <a href="#" class="prev"><<上一页</a> <a href="#" class="current">2</a> <a href="#">3</a> <a href="#">原创 2021-04-09 19:28:41 · 394 阅读 · 0 评论 -
CSS绘制特殊三角，实现梯形样式
制作非等腰三角形可以给边框设置其它样式、属性。（调节边框宽度）<body> <div class="box"> </div></body>.box { width: 0; height: 0; border-top: 120px solid transparent; border-right: 50px solid red; border-left: 0 solid black; bor原创 2021-04-09 19:26:15 · 226 阅读 · 0 评论 -
CSS溢出文字使用省略号表示
溢出文字省略号显示1.单行文本溢出显示省略号：需要给元素设置固定宽度，如果是行内元素需要先转换为行内块元素或块元素 display: inline-block;<body> <p> 由衷敬意，难以言表。此处省略一万字。 </p></body>p { display: inline-block; width: 200px; /* 1.先强制一行内显示文本 */ white-space原创 2021-04-01 18:14:11 · 3954 阅读 · 0 评论 -
CSS实现头像和姓名垂直对齐
vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。需要给行内块元素或行内元素设置该属性，其后的文字才会居中。vertical-align: baseline | top | middle | bottom值描述baseline基线对齐，默认。元素放置在父元素的基线上。top顶线对齐，把元素的顶端与行中最高元素的顶端对齐。middle中线对齐，把此元素放置在父元素的中部。bottom底线对齐，把元素的顶端原创 2021-04-01 18:10:31 · 1770 阅读 · 0 评论 -
CSS界面样式（悬浮在元素上时将鼠标改为小手）
改变悬浮在元素上时鼠标的样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式（cursor）li { cursor: default;}设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状。属性值描述default小白箭头（默认）pointer小手move移动text文本not-allowed禁止<body> <div> <ul>原创 2021-04-01 18:06:36 · 3802 阅读 · 0 评论 -
CSS制作聊天框样式（CSS实现聊天框的三角、CSS画一个三角）
1.用到的知识：定位、盒子边框。效果类似下图：2.盒子边框主要问题在于怎么用CSS画出三角形，在此之前需要理解盒子的边框特点。如果给一个盒子不设置大小，只设置边框样式如下。（分别给盒子各边框不同的颜色）<body> <div class="box"> </div></body>.box { width: 0; height: 0; border-top: 100px solid green;原创 2021-04-01 17:59:38 · 1076 阅读 · 0 评论 -
CSS入门学习笔记（复习用）
CSS基础篇（复习用）1. CSS构成： 由选择器和一条或多条声明组成。 每条声明由属性、值组成，以“键值对”的形式出现。 属性和属性值之间由 “:” 分开。 每条声明最后都要有 “;” 结尾。2. CSS风格紧凑型h3 { color: red;font-size: 25px;}展开格式h3 { color: red; font-size: 25px;}空格规范属性值前面冒号后面保留一个空格。选择器与大原创 2021-03-23 21:20:57 · 125 阅读 · 0 评论 -
CSS控制html元素、文字的各种居中
CSS元素和文字的各种居中CSS水平居中居中元素中的文字可以用text-align属性进行水平居中，也可以将text-align的属性值设置为left和right进行左右对齐的设置。CSS样式.align-center{ height: 100px; background-color: lightcoral; /* 水平居中 */ text-align: center;}html元素<div class="align-center"&原创 2021-03-06 19:46:44 · 511 阅读 · 2 评论 -
CSS元素的显示模式（行内元素、块元素、行内块元素）
CSS元素的显示模式（行内元素、块元素、行内块元素）元素主要分为块级元素和行内元素以及行内块元素1.块元素特点：独占一行宽度高度和内外边距可以控制宽度默认为父容器的100%是一个容器和盒子，里面可以放行内或块级元素常见块级元素有： h1-h6、p、div、ol、li等注意：文字类元素内部不能使用块级元素p标签主要用于存放文字，因此p里面不能放块级元素尤其是div同理 h1~h6内部都不能存放其它块级元素2.行内元素特点：相邻元素显示在一行上，一行可以显示多个。原创 2021-03-06 16:01:58 · 465 阅读 · 0 评论 -
CSS侧边栏隐藏滚动条
CSS样式隐藏侧边栏滚动条需求和问题需求是这样的：之前做了一个左侧导航栏类似于下图layui官网的样子(但是在不同分辨率浏览器中由于内容较多，侧边导航栏的内容显示不出来，也无滚动条滚动查看)。解决使用了layui侧边栏的样式。<ul id="menu" class="nav-bar layui-nav layui-nav-tree layui-nav-side" style="background-color: rgba(102,102,102,0.2);"></ul>原创 2021-01-24 19:35:14 · 2100 阅读 · 0 评论