![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
月落星河°
一个领域里面的大师永远不会是另一个类似领域的菜鸟
展开
-
盒子模型中box-sizing的使用
CSS 盒子模型(Box Model)这里是引用所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子中主要的属性就5个:width、height、padding、border、margin。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距我们一般使用控制台选中的都是内容的宽度,不原创 2021-01-31 16:35:10 · 495 阅读 · 0 评论 -
移动端左右文字布局
左右布局,右边内容可以一直增加,左边保持不动,如下图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&原创 2020-05-18 15:16:02 · 533 阅读 · 0 评论 -
input标签disabled禁用
input { border: none; } input:disabled { background-color: white; }当你的input标签被禁用的时候,那么你的背景会是黑色的,所以你要去去掉禁用的颜色,以上代码就是去掉禁用的颜色。...原创 2019-12-01 17:12:46 · 1111 阅读 · 0 评论 -
pc端footer固定在底部
问题:在pc端中我们的底部导航如果内容不够或者换了屏幕就会出现底部导航乱掉,我去调研了一些官网,发现有的他们的导航是没有固定在底部的,而是随着内容的减少,导航会自动的提升到页面的顶部,而有的导航是固定在底部的,无论你的内容有多少,它都是在你的底部,接下来我就直接上代码<!DOCTYPE html><html lang="en"><head> ...原创 2019-08-07 16:21:04 · 696 阅读 · 0 评论 -
实现 select 下拉框第一个数据颜色显示
在实际项目开发的时候,可能需要使用下拉框,第一个选择的样式为灰色类似于这样的效果,为了区分,所以我用了红色 .select { color: #ccc; } option { color: red } <select class="select"> ...原创 2019-07-22 10:49:52 · 2077 阅读 · 0 评论 -
textarea光标不在初始位置显示
出现这种情况,我们要注意的是中间的内容不能有空格。原创 2019-06-26 16:08:24 · 1308 阅读 · 0 评论 -
:before和:after的使用方法
伪元素可以让我们很方便的加入一个样式,比如在字体前加一个icon,或者加一个下换线,可以不占一个元素的位置,使用起来也很方便,现在介绍一下使用的方法。注意::before和:after中的content是必加项<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-05-22 17:40:50 · 17113 阅读 · 4 评论 -
button按钮点击的时候回出现轮廓线
css控制Button 按钮的点击时候出现蓝色边框 – 北漂小兄弟http://www.inbeijing.org/archives/1139Button 按钮的点击时候出现蓝色边框的问题添加css属性,这样在点击安按钮的时候就不会有蓝色边框了。button{outline:none;}谷歌浏览器中button按钮的边框如何去除 - HTML/CSShttp://www.myexc...转载 2019-05-24 16:22:52 · 1994 阅读 · 0 评论 -
jquery实现进度条状态展示
如上图所示,由于项目需要,需要做一个状态展示,当点击的时候填满整个长度,你需要下载jquery,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...原创 2019-05-06 10:58:03 · 3003 阅读 · 0 评论 -
文字文本超出自动换行
position: absolute;text-overflow:ellipsis;word-wrap:break-word原创 2019-03-01 15:03:56 · 4887 阅读 · 0 评论 -
苹果官网banner
meta charset="UTF-8"&gt;&lt;title&gt;苹果的banner&lt;/title&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&原创 2019-02-28 23:09:53 · 778 阅读 · 0 评论 -
前端css样式小圆点样式
原创 2019-02-21 22:00:54 · 23673 阅读 · 7 评论 -
nth-of-type和nth-child的区别
定义和用法::nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。 <div class="box"> <ul> <li>1</li> <a>2</a> <原创 2019-01-08 22:29:24 · 130 阅读 · 0 评论 -
:nth-child(n)选择器的用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。用代码去讲解这个选择器的使用方法 <div class="box"> <ul> <li>1</li> <li>2</li> &a原创 2019-01-08 21:52:53 · 1812 阅读 · 0 评论