qq_45059908的博客

原创 2.10-css渐变、过渡、2d、3d

线性渐变--CSS3线性渐变中的角度渐变，角度渐变是水平线和渐变线之间的角度，以圆心为起点进行发散盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景径向渐变radial-gradient()形式创建径向渐变背景过渡transition过渡1、所有数值类型的属性都可以参与过渡，比如width、height、left、top、border-radius2、背景颜色和文字都可以被过渡3、所有变形（包括...

原创 设置0.5像素的边框

原创 2.8-边框和圆角

边框border: 1px solid red; 线宽度 线型 线的颜色线型：solid --实线 dashed--虚线 dotted--点状线小属性 意义 border-width 线宽 border-style 线型 border-color 线颜色 去掉边框border：none圆角1、border-radius属性的值通常为px单位，表示圆角的半径border...

原创 @font-face的使用

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）@font-face的语法规则:@font-face { font-family: <YourWebFontName>; src: <source> [<format>][, []]*; [font-weight: <w

原创 2.7-媒体查询和移动端

1.媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。语法@media all and (min-width:320px) { body { background-color:blue;} }设

原创 2.6-flex布局（重点）

左右布局(1)浮动 float:left/right;(2)行内块元素 display:inline-block;(3)flex布局:display:flex;Flex布局 --弹性容器：当内容过多会自适应调整宽度，元素等比例缩放flex容器属性1、display:flex、inline-flex;在弹性容器中默认有两条轴： 主轴：默认情况是水平从左到右的一条轴 侧轴：垂直主轴的一条，默认就是垂直从上到下的一条注意，设为 Flex 布局以后，子元素的flo...

原创 1.5-语义化标签

header元素 表示页面的页头 content/container元素 表示页面的内容 footer元素 表示页面的页脚 nav元素 表示页面的导航栏部分 column元素 表示页面的栏目 wrapper元素 表示页面外围控制整体布局宽度 left、right、center元素 表示左右中 loginbar元素 表示页面的登录条 logo元素 表示页面中的logo部分 banner元素 表示页面的广告，页面中轮播图的位置 main元素 表示页面的主体 hot元素 表示页面中的热点

原创 1.1-h5基础标签

1标题标签<h1>-<h6>h就是head的缩写，独占一行2段落标签<p> p就是paragraph的缩写特点：（1）文本在一个段落中会根据游览器窗口的大小自动换行（2）段落和段落之间保有空隙3换行标签<br /> br就是break的缩写4文本格式标签加粗：<strong></strong> <b></b>倾斜：<em>&lt...

原创 1.4-表格与表单标签

1 表格table 标签1.1 表格的结果为表头和表身，可以为表格添加标题1.2 thead代表表头，tbody代表表身，thead嵌套tr和th，tbody里面嵌套tr和td1.3 tr里只能嵌套th和td，th一般用来表示表头，有加粗的样式，td代表表头对应的具体数据合并单元格标签 跨行合并:rowspan=“合并单元格的个数” 跨列合并:colspan=“合并单元格的个数”跨行：最上侧单元格为目标单元格，写合并单元格跨列：最左侧单元...

原创 css解决留白问题

1、图片底部留白解决方案：将img转化为块级元素display:block;2、行内元素间的空白问题解决方案：给父元素加font-size：0px；再单独给子元素设置文字大小就能显示出行内元素内容；给div或img加{vertical-align:bottom;display:block} 属性完美解决...

原创 2.5-浮动与定位

CSS文档流CSS 有三种基本的定位机制：普通流、浮动流、定位流。 普通流：块级元素从上到下布局，行内元素从左到右布局 浮动流：无论是什么元素都是水平排列 定位流：根据自己的需求随意定位1浮动流--主要用于左右布局使用浮动要注意什么？浮动有哪些性质？使用浮动要注意父盒子要有足够的宽度，如果父盒子没有足够的宽度，那么盒子就会掉下来，并且要浮动都浮动，就是说如果有一个兄弟盒子浮动，那么其他亲兄弟的盒子也要浮动1.1 浮动有顺序贴靠的性质就是说三个盒子都在进性浮动，那么三号盒...

原创 1.3-多媒体语义化标签

1、图片标签images source 图片来源<img src="" />图片本质上没有被插入到网页中，只是被引入到网页中alt属性1、如果由于某种原因无法加载图像。游览器会在页面上显示alt属性中的备用文本2、供视力不方便的朋友使用的网页朗读器，也会 朗读alt中的文本width、height（不需要写单位）如果省略其中一个属性，则表示按原始比列缩放图片扩展：背景属性1、背景颜色 {background-color:颜色值;} 2、背景图片的设.

原创 1.2-h5列表标签

1、无序列表--没有刻意顺序（1）没有顺序级别之分，是并列的（2）<ul>只能放<li>标签（3）<li>里面可以放任何元素（4）<ul>带有自己的样式属性<ul> <li></li> --list item</ul>ul的type属性类似于下图可用无序列表2、有序列表--有刻意顺序可用有序列表（1）有顺序级别之分（2）<o...

原创 2.1-css选择器

1、标签选择器标签选择器也称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所以该种标签语法：标签名称 {属性：属性值；}（a）标签选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。（b）所有的页面元素都可以作为选择符; 用法： （1）如果想改变某个元素的默认样式时，可以使用标签选择符；（如：改变一个p段落样式） （2）当统一文档某个元素的显示效果时，可以使用标签选择

原创 高度塌陷的解决方法

高度塌陷：子元素浮动，但是父元素没有设置高度，导致父元素的高度为0（不能撑开）解决高度塌陷：【1】给浮动的父元素设置overflow：hidden因为设置overflow：hidden 元素没有高度的时候，会检测真是高度（会计算你所有子元素的高 度），浮动元素也会计算，顺带也把高度塌陷的问题解决了缺点：会把定位在外面的元素隐藏【2】在浮动元素下方添加空div,并给该元素添加，表示父元素需要计算这个元素的高度 声明：div{ clear:both; ...

原创 盒子居中的方法

【方法1】margin值必须知道两个盒子的宽高，用大盒子的宽度减去小盒子的宽度在除2，再用margin-top,margin-left进行移动【方法2】当小盒子宽高不固定的时候实现盒子的居中水平居中：把小盒子设置为行内块元素（inline-block ( 行内块元素 )），父元素设置text-align:center;垂直居中：当两个元素在同一行显示，这两个元素高度不一样，这两个元素垂直对齐默认基线对齐，垂直居中对齐用vertical-align属性，注意：两个元素都需要设置vertical

原创 2.4-元素类型--块级元素，行内元素，行内块元素

1、块级元素 （display：block）--不能并排显示，可设置宽高A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。C:块状元素都可以定义自己的宽度和高度。D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。2、行内元素（display：inline）--能并排显示，不能设置宽高.

原创 2.3-盒模型-矩形区域

1、宽度（width）--表示盒子内容的宽度单位：px；移动端也会有百分比；rem未设置（1）块级元素（div，h系列、li等）自动撑满（非继承）（2）行内元素（a、span等）随着内容撑开2、高度（height）--表示盒子内容的高度单位：px；移动端也会有百分比；rem未设置时：默认为0，被其内容自动撑开3、内边距（padding）--盒内元素到盒子的距离作用： (1）用来调整内容(子元素)在容器（父元素）中的位置关系 (2）用来调整子元素在父元素...

原创 2.2-文本和字体属性

1、color属性 主要可以用英语单词、十六进制、rgb()、rgba（）等表示法 rgb(红，绿，蓝)（0~255） rgba（红，绿，蓝，透明度）透明度（0~1,0表示纯透明，1表示纯实心）2、font-size属性 单位:px、em、rem 网页文字正文字号通常是16px，游览器最小支持10px字号3、font-weight属性 字体的粗细 normal和bold normal--正常粗细，与400等值 bold-...