css02

1、框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width;②对象实际高度=上下外边距+上下边框+上下内边距 + height;

2、外边距:margin:取值:①top(上) right(右) bottom(下) left(左);②value:一个值,四个方向相同;③top/bottom(上/下) left/right(左/右):上下一致,左右一致;④auto:左右水平居中,上下无效(前提必须设置宽度);

3、外边距合并:两个垂直外边距相遇,形成一个外边距,以值大者为主;

4、外边距溢出:父子元素,设置子元素上下外边距,结果导致作用于父元素上(父元素无边框,且设置第一个子元素时产生);解决:①父元素设置上下边框;②给父元素设置内边距,取代子元素的外边距;③父元素添加空table作为第一个子元素;

5、内边距:padding:取值:①top(上) right(右) bottom(下) left(左);②value:一个值,四个方向相同;③top/bottom(上/下) left/right(左/右):上下一致,左右一致;* 行内元素的内边距不影响其他元素;

6、背景:①背景色:background-color;②背景图片:background-image:url(相对路径);③背景平铺:background-repeat:a、repeat:默认,水平垂直都平铺;b、no-repeat:不平铺;c、repeat-x:水平平铺;d、repeat-y:垂直平铺;④背景尺寸:background-size:a、取值/百分比;b、cover:扩大背景图至完全覆盖;c、contain:背景图扩大至一边适应;⑤背景固定:background-attachment:a、scroll:默认,滚动;b、fixed:固定,背景不随滚动条改变;⑥背景定位:background-position:x(值正右偏移/横向关键字) y(值正下偏移/纵向关键字)⑦Sprites图:将所需图像移至sprites图左上角;⑧背景综合:background:color url() repeat attachment position;

7、渐变:①线性渐变:background-image:linear-gradient(angle(方向,关键字或角度),color-point1(变化颜色,颜色 位置),color-point2……);②径向渐变:background-image:radial-gradient(【size at position】(半径at圆心位置),color-point1(颜色 位置/占比),color-point2……);③重复线性渐变:background-image:repeating-linear-gradient(angle,color-point);* color-point:位置一定要给绝对的数值(px),不要给相对 %;

8、版本兼容性:在取值渐变函数前添加兼容前缀,①Firefox:火狐,-moz-;②Chrome:谷歌,-webkit-;③Opera:欧朋,-o-;④IE:Internet Explorer,-ms-;

时间: 2024-10-03 03:05:05

css02的相关文章

H5基础标签浅谈(二)

这周学习开始接触CSS样式表了,能制作的网页也开始了各种高大上,各种属性与属性值也纷至沓来,编程的世界确实很精彩. 首先,咱们先来看看样式表的类型.主要分为3种: [1.行内样式表] (1)将CSS样式,与HTML代码完全糅杂在一起,不符合W3C关于"内容与表现分离"的基础规范,不利于后期维护. (2)优先级最高,但是不推荐使用. <div style=""></div> [2.内部样式表] (1)一定程度的将CSS样式与HTML代码进行了分

HA架构之heartbeat安装配置详解

一.主备相互解析 设置多个ip # vim /etc/hosts 192.168.7.2    css01 192.168.7.3    css02 二.配置扩展yum源 wget www.lishiming.net/data/attachment/forum/epel-release-6-8_64.noarch.rpm rpm -ivh epel-release-6-8_64.noarch.rpm 三.上传安装包 yum -y install lrzsz cd /usr/local/src r

CSS学习笔记01

CSS样式表1.颜色:color:RGB#FFFFFF:全亮,白色:#F00=#FF0000,红色;2.内嵌样式<!--通过style属性来设置样式,这个样式是嵌套在标签中,可以称为内嵌样式,内嵌样式仅仅只是对当前标签有效,内嵌标签中的元素会把在style中的样式替换掉--><h2 style="color:#212267;text-decoration:underline;font-size:12px">这是我的第一个CSS文件</h2>3.外部样

响应式设计笔记

关于加载查询的最佳方法,解决IE7,IE8的问题 Respond.js 宁浩网 480px 767px, 1024px, 1280px, 910px 章节1:课程介绍与基本概念 课时1课程介绍01:39 课时2响应式设计的真实例子02:33 课时3viewport - 可视窗口01:33 可视区域=窗口大小,页面大小,不一样的. 缩放的级别, <meta name="viewport" content="width=device-width, initial-scale

淘宝店铺装修教程之下载淘宝视频及分析视频地址中的高逼格信息

摘要: 关于淘宝视频方面的教程,艺灵已写过好几篇了,唯独没有下载的教程,然后群内小伙伴也一直问这个问题,所以特写此教程,内含信息量巨大,看官慎入...... 一.起因 还是因为刚有群友在群里问这个问题,已会的神人请无视这篇基础教程. 在讲如何下载淘宝视频之前,不得不把之前写的几篇教程拿出来,要不然那谁又该问:怎么上传淘宝视频.怎么获取淘宝视频链接.店铺中怎么安装淘宝视频.详情页中怎么放淘宝视频等等问题.如果看官对刚提的几点有疑惑,请先看完下面几篇教程文章后再回来继续看这篇文章. 二.淘宝视频相关