CSS
关注
分享
扫一扫
CSS study
gunsmoke
这个作者很懒，什么都没留下…
展开
-
利用translate元素移动控制元素居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> article { border: solid 2px black...原创 2020-02-27 15:57:50 · 333 阅读 · 1 评论 -
transform控制元素移动
div { width: 200px; height: 200px; background-color: yellowgreen; } div:hover { transform: translateX(200%); transition: 1s...原创 2020-02-27 15:29:53 · 783 阅读 · 0 评论 -
用flex方式布局上中下页面结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=...原创 2020-02-25 13:55:38 · 1374 阅读 · 0 评论 -
flex布局绘制国际象棋棋盘
纯属无聊，选择样式写的很烂。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0...原创 2020-02-24 19:36:56 · 405 阅读 · 0 评论 -
flex布局初体验
直接上页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimu...原创 2020-02-24 14:25:42 · 102 阅读 · 0 评论 -
粘性效果，很有意思
article { border: solid 1px black; height: 200px; width: 200px; overflow: scroll; } h2 { background-color: blue; ...原创 2020-02-23 20:29:45 · 228 阅读 · 0 评论 -
css简单绘图
div { width: 100px; height: 100px; } div.circle { clip-path: circle(50% at 50% 50%); background-color: blue; } div.elli...原创 2020-02-22 17:44:30 · 242 阅读 · 0 评论 -
文字环绕距离控制
.rect { width: 100px; height: 100px; border: solid 2px red; float: left; margin: 0; shape-outside: margin-box; // 这里是关键 ...原创 2020-02-22 17:24:28 · 133 阅读 · 0 评论 -
子元素浮动后，父容器高度随子元素高度变化
一、问题的提出main { width: 300px; border: solid 1px black; padding: 20px; margin: auto; } div:nth-child(1) { width: 100px; ...原创 2020-02-21 19:24:29 · 892 阅读 · 0 评论 -
设置自定义属性
h1:hover::before { content: attr(data-link); color: #2aabd2; background-color: #ddd; border: solid 2px #0f0f0f;}<h1 data-link="gunsmoke">这里是主文本&...原创 2020-02-21 15:19:33 · 240 阅读 · 0 评论 -
背景颜色与裁切使用
div { width:800px; height: 400px; border: dashed 10px black; margin: auto; background-color: red; background-clip: border-box; ...原创 2020-02-20 17:15:55 · 176 阅读 · 0 评论 -
根据内容自适应尺寸
main { width: 300px; height: 300px; background-color: #2aabd2; } span { display: block; width: fit-content; hei...原创 2020-02-20 15:45:58 · 211 阅读 · 0 评论 -
元素显示的模式控制
ul>li { height: 80px; width: 100px; display: inline-block; } ul>li:hover { color: yellow; background-color: red; ...原创 2020-02-20 14:51:00 · 80 阅读 · 0 评论 -
尺寸限制与内边距
article { border: solid 1px #ddd; width: 500px; height: 500px; padding: 20px; box-sizing: border-box; // 这个盒子大小固定，包括边框也算在内，如果没有这一句，那么当增大padd...原创 2020-02-20 13:56:52 · 146 阅读 · 0 评论 -
文本对齐与缩进
div { font-size: 30px; text-indent: 2em; //控制文本缩进，缩进2字符 text-align: center; // 水平对其方式，居中}<div>测试文本测试文本测试文本</div>原创 2020-02-20 13:21:40 · 254 阅读 · 0 评论 -
文本空白与溢出处理
h1 { white-space: pre; // 相当于html中的pre标签,有多少空格就显示多少空格，保留空白 // white-space: pre-wrap; 保留空白与换行符,如果是nowrap表示不换行}<h1>测试文本测试文本测试文本测试文本测试文 本测试文本测试文本测试文本测试文本测试文本测试文本测试 文本测试文本测试...原创 2020-02-20 13:08:02 · 161 阅读 · 0 评论 -
颜色与行高的声明
p { color: rgba(0,0,255,0.5); // 最后一个参数表示透明度，0代表完全看不见，1代表完全不透明 font-size: 24px; //这里大小也可以是百分比，这时字体大小就是继承过来的字体大小的百分比 line-height: 1.2em; // 这里可以用px,但是这里em是相对单位，表示字符高度的倍数，1em代表100%，1.2...原创 2020-02-19 17:29:32 · 137 阅读 · 0 评论 -
css自定义字体
@font-face { font-family: "gunsmoke"; src: url("XXX.otf") format("opentype"), url("aaa.otf") format("opentype");}h2 { /*font-family: aaa,bbb,ccc 这里可以定义很多字体备用*/ font-family: gunsmoke;}<...原创 2020-02-19 16:59:56 · 100 阅读 · 0 评论 -
css权重的有关备忘
权重计算表强行变为最高权重可以使用 !important，比如div { color: red !important;}样式继承是没有权重的通配符*权重为0，继承的权重为NULL，0 > NULL原创 2020-02-19 16:11:59 · 81 阅读 · 0 评论 -
文本伪类的操作
第一个字符红色p::first-letter { color: red;}<p>测试文本测试文本测试文本</p>文本前面添加文本span::before { content: "前面的文本\2193"; // \2193是转义字符，表示向下的箭头 color: red;}<span> 我...原创 2020-02-19 15:49:54 · 137 阅读 · 0 评论 -
表单相关伪类选择器
input:disabled { background-color: #2aabd2; } <form action="#"> <input type="text" disabled> </form>效果为 input:disabled { backg...原创 2020-02-19 14:24:33 · 213 阅读 · 0 评论 -
根据元素编号选择
选择第二个 article h1:nth-child(2) { // 第2个h1变红 color: red; } <article> <h1>第1个h1</h1> <h1>第2个h1</h1> // 这个变红了 <h1>第3个h...原创 2020-02-19 13:33:18 · 110 阅读 · 0 评论 -
伪类选择唯一之元素
only-child如果这个元素是它父亲的唯一子元素，那么就选中了，上代码 article :only-child { color: red; } <article> <h1>我不是红色</h1> // h1不是article的唯一子元素，article有3个子元素(1个h1和2个div)，因此它...原创 2020-02-18 20:32:59 · 174 阅读 · 0 评论 -
首尾元素伪类选择
first-child表示第一个子元素，子元素的第一个子元素也可以，上代码 article :first-child { color: red; } <article> <h1>我是红色</h1> // 这是article的第一个子元素 <div> &...原创 2020-02-18 17:17:43 · 142 阅读 · 0 评论 -
锚点及空元素
锚点操作<a href="#gunsmoke">gunsmoke</a><div style="height: 2000px"></div><div id="gunsmoke"> gunsmoke</div>点击a标签后跳转到第二个div处，如果在跳过去后将字体变为红色，则应该加上div:target {...原创 2020-02-18 14:21:31 · 141 阅读 · 0 评论 -
伪类选择器初步
<a href="www.baidu.com">www.baidu.com</a> a:link { color: red; } // 默认状态 a:visited { color: black; } // 已访问状态 a:hover { ...原创 2020-02-18 14:01:59 · 84 阅读 · 0 评论 -
属性选择器
基本代码h1 { color: red;}1.含有title属性的h1，title属性只要有就行，可以为空<style> h1[title] { color: red; }</style>// <h1 title>我会被染红</h1>2.含有title属性并且含有id属性的h1，title属性和id属性只要有就行...原创 2020-02-17 21:39:56 · 101 阅读 · 0 评论 -
css的几个选择器
祖先后代选择器zuxian houdai { ...// 以上的空格代表祖先后代}父子选择器parent>son { .. // 以上的大于号表示父子选择器}兄弟选择器h1~h2 { .. // 以上的~表示兄弟选择器}h1+h2 { .. // 以上的+代表紧挨着的兄弟}...原创 2020-02-05 22:01:03 · 91 阅读 · 0 评论