
CSS
Trevor Lan
工欲善其事,必先利其器!
展开
-
最实用的弹性布局flex
1 引言作为后端工程师,学点布局知识还是很有必要的,因为这样即使没有前端工程师的辅助自己也能马马虎虎的开发自己的业余项目了。在前端布局中,有这么三种:表格布局、栅格布局、弹性布局,选择哪种布局,这个似项目而定吧,我们不能定义最好的布局,当可以选择最适合自己项目的布局。对于笔者而言,吾更偏爱弹性布局,吾觉得该布局使用起来更加灵活,所以,本次笔者记录的就是学习弹性布局flex的知识点,方便自己日后...原创 2019-11-29 12:32:38 · 507 阅读 · 0 评论 -
CSS 子级元素固定在父级元素底部
前端开发中学会让子级固定在父级元素的底部的技巧很有用哦。实现效果:案例源码<!doctype html><html> <head> <meta charset="utf-8"> <title>子级元素固定在父级元素底部</title> <meta name="viewport" cont...原创 2019-09-02 18:10:36 · 8887 阅读 · 3 评论 -
解决CSS子级float而父级不能自适应的问题
目录尴尬场景解决方法1解决方法2解决方法3尴尬场景<!DOCTYPE html><html><head> <title></title> <style type="text/css"> <style type="text/css"> *{ margin: 0; ...原创 2019-08-02 14:43:40 · 596 阅读 · 0 评论 -
CSS选择器优先级
规则1:id选择器 > class选择器 > 标签选择器规则2:行内样式 > 内部样式 == 外部样式注:选择器相同的情况下,离标签越近优先级越高 优先级也可以用important增加权重权重表示形式: 1 0 0 0 ...原创 2019-05-20 11:39:59 · 752 阅读 · 0 评论 -
CSS之边框、圆角、背景
CSS 边框属性 说明 CSS border-image 设置所有边框图像的速记属性。 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-shadow 附加一个或多个下拉框的阴影 3 CSS3 圆角属性 描述 border-radius 所有四个边角 border-...转载 2019-03-18 14:46:23 · 1393 阅读 · 0 评论 -
CSS之分页
简单分页<!DOCTYPE html><html><head><meta charset="utf-8"> <title>简单分页</title> <style>ul.page1{ display: inline-block; padding: 0; m原创 2019-03-18 14:47:43 · 947 阅读 · 0 评论 -
CSS之变换及过度
2D转换属性以下列出了所有的转换属性:Property 描述 CSS transform 适用于2D或3D转换的元素 3 transform-origin 允许您更改转化元素位置 3 2D 转换方法函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 translate(x,y) ...转载 2019-03-17 14:06:57 · 794 阅读 · 0 评论 -
CSS文本与字体
CSS文本属性 描述 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shado...原创 2019-03-17 01:01:58 · 736 阅读 · 0 评论 -
CSS选择器
1、标签选择器 标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>等。例如下面代码:p{font-size:12px;color:red;}2、类选择器 注:以英文圆点开头,其中类选器名称可以任意起名(尽量取有含义的类名).类选器名称{css样式代码;}3、ID选择器 注:、ID选择符的前面是井号(#)号,而不是英文圆点(.)#setRed{原创 2017-06-19 16:34:40 · 823 阅读 · 0 评论 -
css的三种方式
1、使用内联式CSS设置。/*直接在标签内设置字体颜色*/<p style="color:red">这里文字是红色。</p>2、使用嵌入式CSS设置。/*将<p></p>标签设置为红色*/<style type="text/css">p{color:red;}</style>3、使用外部式CSS设置。/*样式写在main.css文件中*/<link href="main.css" re原创 2017-06-19 16:03:24 · 1123 阅读 · 0 评论