前端设计>知识整理>正文
尺寸与边框
1.单位
1.尺寸单位 1.px:像素 1024*768 2.in:英寸 1in=2.54cm 3.pt:磅(1pt=1/72in) 多数用于表示文字的大小 4.cm:厘米 5.mm:毫米 6.em:相对于父元素乘以倍数(多个父元素2em) 7.rem:根相对(元素字体大小乘以倍数,html\body)2.颜色单位(颜色取值) 1.英文单词 red,blue,gray,green,yellow,black.... 2.rgb(r,g,b) r:0-255g:0-255b:0-255 3.rgba(r,g,b,alpha) alpha:透明度,取值为0-1之间的小数,值越大,不透明度越高 4.#rrggbb 由6位16进制的数字\字母表示一个颜色0-9或A-f#000000:黑色#ffffff:白色#eeeeee:灰色#ff11aa 5.#rgb是上面的缩写形式 #000:黑色#fff:白色#f1a
2.尺寸属性
1.作用 设置元素的宽度和高度2.语法 1.宽度 width:宽度min-width:最小宽度max-width:最大宽度 2.高度 height:高度min-height:最小高度max-height:最大高度3.页面中哪些元素允许设置尺寸属性 1.所有的块级元素都允许设置尺寸 div,p,h1,h2..h6,ul,ol,dl,结构标记 2.本身具备width和height属性的行内元素是可以设置的 img,table 3.行内块允许设置尺寸 大部分的表单控件(单选按钮,复选框) 4.大部分的行内元素是无法设置尺寸 a,span,b,i,u,s等
3.溢出处理
当内容多,元素区域小的时候,就会产生溢出的效果,默认都是纵向溢出。 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出可见 2.hidden 隐藏的,溢出的内容全部隐藏,溢出内容不可见 3.scroll 显示滚动条,溢出时,可用 4.auto 自动,溢出时才显示滚动条并可用
4.边框
1.边框属性 1.简写方式 border:width style color; width:边框的宽度,以px为单位的数值 style:边框的样式 取值: solid:实线 dotted:虚线边框(点) dashed:虚线边框(线) color:边框的颜色 取值:合法的颜色值 transparent:透明色 注意: 取消边框:border:0;或border:none; 2.单边定义 只设置某一条边的边框 属性:border-方向:width style color; 方向:top/bottom/left/right 上 下 左 右 3.单属性定义 只设置四条边框的一个属性 属性:border-width/style/color:值; ex:border-width:3px; border-style:dotted; border-color:red; 4.单边单属性的定义 只设置某一个方向的某一个属性 属性: border-方向-属性:值; 方向:top/bottom/left/right 属性:width/style/color ex: border-left-color:blue; border-right-style:solid; border-bottom-width:6px;2.边框倒角 将元素的直角倒换成圆角 属性:border-radius 取值: 1.以px为单位的数值 2.百分比 % 设置圆形(50%) 单角设置: border-top-left-radius:左上角 border-top-right-radius:右上角 border-bottom-left-radius:左下角 border-bottom-right-radius:右下角3.边框阴影 属性:box-shadow 取值:h-shadow v-shadow blur spread color inset h-shadow:阴影在水平方向的偏移距离,必须值 取值为正:阴影向右偏移 取值为负:阴影向左偏移 v-shadow:阴影在垂直方向的偏移距离,必须值 取值为正:阴影向下偏移 取值为负:阴影向上偏移 blur:阴影模糊距离,取值越大,模糊效果越明显,以px为单位的数值(可选值) spread:阴影的大小,指定要在基础阴影上扩充出来的大小,取值以px为单位的数值(可选值)color:阴影颜色(可选值) inset:将默认的外阴影改为内阴影(可选值) 4.轮廓 轮廓指的是边框的边框,绘制于边框外围的一条线 属性: outline:width style color; widht:轮廓的宽度 style:轮廓的样式 取值:solid/dotted/dashed color:轮廓的颜色 取消轮廓: outline:none/0;
本文链接:https://www.weguiding.com/zhishi/200.html
- 上一篇:网页背景属性
- 下一篇:meta标签及用法详解
猜你喜欢
- 2019-01-24 HTML 文本格式化容易忽略的标签
- 2019-01-24 前端常见跨域解决方案整理
- 2019-01-24 viewport
- 2019-01-24 Web前端开发代码规范——HTML/CSS规范
- 2019-01-24 页面渲染优化
- 2019-01-24 可能用到的meta标签
- 2019-01-24 4种盒子/容器垂直水平居中的方案
- 2019-01-24 meta标签及用法详解
- 2019-01-24 CSS尺寸与边框
- 01-244种盒子/容器垂直水平居中的方案
- 01-24Web前端开发代码规范——HTML/CSS规范
- 01-24前端常见跨域解决方案整理
- 01-24渐变样式设置
- 01-24viewport
- 01-24页面渲染优化
- 01-24可能用到的meta标签
- 01-24前端常见跨域解决方案整理
- 01-24viewport
- 01-24Web前端开发代码规范——HTML/CSS规范
- 01-24页面渲染优化
- 01-24可能用到的meta标签
- 01-244种盒子/容器垂直水平居中的方案
- 01-24meta标签及用法详解
- 01-24渐变样式设置
- 01-24HTML页面自动清理js、css文件的缓存(自动添加版...
- 01-24网页文本格式化属性
- 01-24网页背景属性
- 01-24CSS尺寸与边框
- 01-24meta标签及用法详解
- 01-244种盒子/容器垂直水平居中的方案
- 图文推荐