css
文章平均质量分 75
brightan
Discovery
展开
-
CSS笔记(美化超链接)
一、定义超链接 1、超链接分类 1)内部链接(链接的目标在同一网站中,直接相对路径就可以链接的,URL不需要指定协议和互联网位置) 2)外部链接(一般为外部网站目标,需要指定协议和网站地址) 3)锚点链接(锚标记后缀“#”)2、<a>标签 <a href="https://www.baidu.com/" target="_blank">百度一下</a&g...原创 2018-02-08 19:57:55 · 1437 阅读 · 0 评论 -
html居中问题
一、水平居中(text-align:center)(可继承) 1、行内元素 text-align:取值包括4个:left | right | center | justify 这里的align指的是每行的文字都向一个方向靠。 ps:text-align存在兼容性问题 CSS2.1标准下,center可以居中所有行内元素 CSS1(IE6,7,8)标准下,只有块状元素具有该属性,并且所有...原创 2018-03-19 11:12:34 · 869 阅读 · 0 评论 -
display,position和float之间的关系(Relationships between 'display', 'position ',and 'float ')
三个影响盒子构建和布局的元素——‘display’,‘position’ 和 ‘float’——相互影响如下: 1、如果‘display’ 取 ’none‘ 值,那么’position‘ 和 ’float‘ 的设置都不会应用。在这种情况下,元素不构建盒子(不显示) 2、否则,如果 ’postion‘ 取值为 ’absolute‘ 或者 ’fixed‘ ,那么该盒子就被放在绝对位...原创 2018-06-18 14:33:40 · 270 阅读 · 0 评论 -
CSS(深入研究合并外边距collapse)
合并外边距CSS中,两个或多个盒(可能但不一定是兄弟)的相邻的垂直方向的margin会被结合成一个margin。外边距按这种方式结合叫做合并(collapse)1、相邻的垂直外边距会合并,除了html和body的外边距不合并图一元素如果带有clear属性(生成间隙clearance),上外边距与下外边距相邻(height为0),那么它的外边距会和兄弟的相邻外边距合并,但合并后的m...原创 2019-07-25 22:12:32 · 539 阅读 · 0 评论 -
CSS2.1常规流(包含BFC,IFC)
常规流中的盒可能是块,可能是行内,块级盒参与块格式话上下文(BFC),行内级盒参与行内格式化上下文(IFC)一、BFC(Block Formatting contexts)BFC就是我们常说的块级格式化上下文。哪些元素会建立新的块级格式化上下文?浮动元素绝对定位元素非块盒的块容器(display为inline-blocks、table-cells和table-captions)...原创 2019-07-27 22:26:19 · 246 阅读 · 0 评论 -
CSS浮动定位(float)
CSS浮动定位在CSS中设置一个盒子的float值为left或者right,就会使得盒子浮动起来。浮动盒子的特点:浮动盒子向左或者右移动,直到碰到包含块的边界(content)或者另一个浮动盒的外边界(margin)如果存在行框,浮动盒的上外边界(margin)和当前行框的上边界对齐...原创 2019-07-28 19:05:46 · 348 阅读 · 0 评论 -
CSS笔记(美化图像)
一、插入图像 <img src="URL" alt="替代文本“> <img>标签并不会在网页中插入图像,而是从网页上链接图像,它创建的是被引用图像的占位空间二、设置图像格式 1、定义图片大小 height:定义图像的高度 width:定义图像的宽度 ismap:将图像定义为服务器端图像映射 usemap:将图像定义为客户端图像映射 longdesc:指...原创 2018-02-08 05:25:13 · 575 阅读 · 0 评论 -
CSS笔记(美化文本)
一、字体样式 1、定义字体类型(下面的”|”用来分隔可选值) 1)font-family属性 font-family:字体1名称,字体2名称,字体3名称 用字体名称来定义,按优先顺序排列,逗号隔开 font-family:ncursive|fantasy|monospace|serif|sans-serif用字体序列名称来定义 2)font属性(复合属性,可以定义多种字体属性) fon原创 2018-02-07 21:41:28 · 910 阅读 · 0 评论 -
CSS笔记(美化列表)
一、列表的基本结构 列表的结构可以分为两种基本类型:有序列表和无序列表。无序列表使用项目符号来标识列表,而有序列表则使用编号来标识列表的项目顺序。 <ul></ul>标识无序列表 <ol></ol>标识有序列表 <li></li>标识列表项目 还有一种特殊列表是定义列表,它包括词条和解释两块内容 <dl>原创 2018-02-08 21:41:10 · 1533 阅读 · 1 评论 -
CSS笔记(美化表格)
一、表格的基本结构 表格由行、列、单元格三部分组成,单元格是行与列交叉的部分,可以拆分和合并。 表格<table>,行<tr>,单元格<td> 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 1、标准化的表格结构 *<table>定义表格 *<caption>定义表格标题<caption>必须紧随&l...原创 2018-02-08 23:38:52 · 1170 阅读 · 0 评论 -
CSS笔记(美化表单)
一、表单的基本结构 表单由很多控件构成,如文本框、文本区域、单选按钮、复选框、下拉菜单和按钮等。 一个完整的表单结构应该由三部分组成 1)表单框架(<form>):<form>是一个包含框,里面包含所有表单对象。 包含处理表单数据的各种属性,如提交字符编码、与服务器交互的页面、HTTP提交方式等 2)表单域(<input>、<select>...原创 2018-02-09 22:31:21 · 3749 阅读 · 0 评论 -
CSS笔记(布局基础)
一、CSS盒模型 1、盒模型结构 content(内容)、padding(内边距)、border(边框)、margin(外边距) 所有元素都可以视为一个盒子,盒模型是页面元素的基本模型结构 *content包括width、height、background,它可以延伸到补白或边框内。 可以通过min-width、max-width、min-height、max-height灵活控制大小(...原创 2018-02-10 16:45:22 · 181 阅读 · 0 评论 -
HTML、CSS笔记(网页排版)
一、使用结构标签 HTML网页不仅需要div标签,还需要以下几类标签来完善结构 1)<h1>~<h6> 2)<p> 3)<ul><ol><li>等 4)<table><tr><td>等 5)<form><i原创 2018-02-11 16:48:40 · 319 阅读 · 0 评论 -
CSS笔记(基础知识)
CSS CSS样式基本结构 CSS注释语句/*注释语句*/CSS样式主要应用方式(4种) 行内样式、内嵌式、链接式以及导入式 1、行内样式: 2、内嵌式: 样式定义文本 3、链接式: 4、导入样式: @import "yangshi.css" CSS样式表:包括内部样式表和外部样式表CSS两个基本特性 1、层叠性 1)样式表的优先级:作者>用户>浏览器>HT原创 2018-02-06 16:15:14 · 206 阅读 · 0 评论 -
CSS笔记(动画变换)
一、设计2D变换 transform:none | <transform-function> [<transform-function>]* <transform-function>设置变化函数。 常用的变换函数的功能如下: matrix():定义矩阵变换,即基于X和Y坐标重新定位元素的位置 translate():移动元素对象,即基于X和Y坐标重新定...原创 2018-02-11 23:30:21 · 275 阅读 · 0 评论 -
CSS选择器
一、基本选择器 分为四类:标签选择器、类选择器、ID选择器、和通配选择器。 1、标签选择器(标签名) p { } 2、类选择器(“.”前缀开头+class属性值) .classname { } 指定类选择器 p.classname { } class属性可以表示属于多个类,空格隔开 <p class="cn1 cn2 cn3...">&...原创 2018-02-07 14:55:00 · 259 阅读 · 0 评论 -
CSS文本换行设置
1、word-wrapword-wrap:normal | break-word;这里设置的是文本内容换行normal:默认值,当一行剩余空间无法容纳下一个字(英文是指单词)时,会换行break-word:针对英文的文本,这个值可以让一个单词拆分开来换行。2、word-breakword-break:normal | break-all | keep-all决定单词是否柴拆分...原创 2019-07-28 20:16:12 · 18011 阅读 · 1 评论