【CSS 第五天】背景,边框
总结一下今天所学习的内容,如下:
- 背景
属性 例子或作用 background background: #00FF00 url(bgimage.gif) no-repeat fixed top;background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。url(),渐变 linear-gradient(to bottom, orange, yellow)background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。值:repeat-x,repeat-y,repeat,no-repeat;
background-clip 超出边框如何处理。值:border-box|padding-box|content-box
- border
属性 描述 border 简写属性,用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式.值:solid /dotted/ dashed/ groove/double/none/ border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。包括border-left/border-right
- padding 内边距 值:top right bottom left
- margin 外边距 值:top right bottom left
- display 改变生成的框的类型 : block(分块), inline(内联)
- border
- 定位机制
- position absolute(绝对定位),fixed,relative,none
- float
- 设置浮动
- 清除浮动 clear:both/left/right
【CSS 第五天】背景,边框的更多相关文章
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 键盘控制背景边框平滑移动(jquery)
今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...
- CSS的相关知识——背景,超链接,列表,表格,奇偶选择器
接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色 rgb函数设置 2.background-image 背景图片 url(“logo.jp ...
- 测开之路九十二:css之背景色和背景
引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 用div加css做表格去掉外围边框
通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
随机推荐
- 微信支付errcode:40163,code been used,错误小结
1.配置时注意,支付平台中的支付授权目录, 注意大小写. 昨天碰到的问题,就是自己跳转时,路径写的全小写.跳转支付页面也能跳转过去,但是log中总是调用两次code,报40163错误.后改成和公总号支 ...
- Flask+SQLAlchemy+alembic+Flask-RESTful使用
前言 其实准备把这篇删掉,先写Flask-restful相关的,后来想想大体框架还是先写出来,这两天踩了很多坑,有的谷歌也没有答案.一直摸索也总算是开始了. 正文 SQLAlchemy/alembic ...
- 获取页面所有a标签href
for(i=0;i<=document.getElementsByTagName("a").length;i++){ console.log(document.getElem ...
- DGTween 控制物体移动并且播放相应的动画
假设有以上的状态,咱们不动的时候需要播放发呆的动画,然后任意时刻会进行Run的行动.于是有了以上的状态机. 为了完成目标追踪,比如跟随咱们的光标,这时候就需要将如以下代码: ani = gameObj ...
- vue搭建app, M端项目流程
思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟 打开cmd,使用命令行 1.切换盘符:e: 2.使用vue建立一个项目,具体请看我的 ...
- echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕
-------tip1-------- 在 tooltip 里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...
- 使用Nginx+Lua实现waf
使用Nginx+Lua实现waf 技术内容来自:https://github.com/loveshell/ngx_lua_waf 软件包需求: 1 .Nginx兼容性[最后测试到1.13.6] [ro ...
- 百度 Javascript开发 API
一.在手机wap上滑动地图,标准点在最中心位置 map.getCenter() 1.当移动地图时,点同时移动,获取屏幕中心点 <!DOCTYPE html> <html> &l ...
- James Munkres Topology: Sec 22 Example 1
Example 1 Let \(X\) be the subspace \([0,1]\cup[2,3]\) of \(\mathbb{R}\), and let \(Y\) be the subsp ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165319
安装kali 我从网上找了相应教程一步一步跟着走,教程链接:(https://blog.csdn.net/qq_40950957/article/details/80468030) 安装成功: 配置共 ...