|
今天来分享一下这十几天来对html及css方面的一点知识积累 Html方面web三个标准结构（对网页元素进行整理和分类），HTML 表现（设置网页元素的版式、颜色大小等外观样式），CSS 行为（网页模型的定义及交互的编写）。JavaScript HTML是超文本标记语言是用来描述网页的一种语言。（1.超越文本限制 2.超级链接文本） HTML作用：网页是由网页元素组成的，这些元素是利用html标签描述出来的，然后通过浏览器解析，就可以显示给用户了。 HTML骨架： <html> <head> <title></title> </head> <body> </body> </html> 分类：双标签（<标签名>内容</标签名>） 单标签（<标签名 />） 图像标签（单标签）<img src="图像URL" /> 宽度高度等比缩放一般只需改一个 链接标签（双标签）<a harf="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 可以使用#代替空链接，外部链接需加http: | 属性 | | | 用于指定链接目标的url地址，当为标签应用herf属性时，它就具有了超链接的功能。 | | 用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
特殊字符以&开头，以；结尾 Input属性value 默认值：没有交互效果 --- value=“输入文本内容” placeholder:占位符 html5的新属性，有交互效果 --- placeholder="输入文本内容 name: 给当前的数据起一个名字，让后台工作人员调用 文本框：input的type取值为text 密码框：input的type取值为password 单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类； 复选按钮：type=“checkbox”，也可以设置同样的name名称，但是 不会影响多选的效果； 普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值； 提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的； 重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的； 图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径； 文件域：<inputtype=“file” /> 上传文件使用。 单选按钮和复选框的默认选中设置对应的属性checked=“checked” select下拉列表一对select标签嵌套多对的option标签 <select> <option></option> <option></option> </select> 如果option有selected=“selected”表示默认选中。 CSS方面简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化。 Css书写位置可分为： 行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离； 内部样式表：部分结构和样式的分离。缺点：没有彻底分离； 外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入。 Css选择器 选择标签的，把想要选择的元素标签选择出来。 基础选择器：标签选择器（html选择器）、类选择器、ID选择器 复合选择器：后代选择器、并集选择器、指定标签选择器 文本水平居中 text-align: center 实际的意思是让文本在父级盒子里居中显示，实际工作中text-align:center;不紧可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中； 注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子； 文本的行高 line-height 文本首行缩进 text-indent text-indent:2em; 首行缩进2个字； 文本线条装饰 text-decoration text-decoration:none;没有线 text-decoration：underline；下划线 text-decoration:line-through;中划线/删除线 text-decoration:overline; 上划线 链接的伪类四种状态： a:link 未访问的链接（访问前） a:visited 已访问的链接（访问后） a:hover 鼠标移动到连接上（鼠标经过） a:active 选定的链接（按下鼠标的时候） 注意：以上的顺序不能颠倒； 标签的显示模式分为以下三种： 块级元素：自己独占一行； --- 代表标签 div、h标签 常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd 行内元素：一行可以共存多个；--- 代表标签 span 、a 常见的行内元素：a span u s del strong em i ins 等； 行内块元素：一行可以共存多个； --- 代表标签 img 、 input 特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式； 将元素转化为块级元素：display:block; 将元素转化为行内元素：display:inline; 将元素转化为行内块元素：display:inline-block; 实体化三属性宽width 高height 背景background 注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题； 背景图片固定：background-attachment:fixed; 背景的复合写法background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴； 让图片的中间位置显示出来，可以是用background-position: center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）； 背景颜色半透明background：rgba(0,0,0,透明度); R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写； 注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的； Css权重特等 !important 提高权重，有提权的效果，有了样式优先生效； 老大 第一等：代表内联样式，如: style=””，权值为1000。 1,0,0,0 第二等：代表ID选择器，如：#content，权值为100。 0,1,0,0 第三等：代表类，伪类和属性选择器，如.content，权值为10。 0,0,1,0 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 0,0,0,1 第五等 继承性 权重值为0 0,0,0,0 盒子模型组成 内容： 实体化宽高和里面的文字图片等等 边框： border 内边距： padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 边框的综合写法边框的宽度：border-width: 3px; 边框的样式：border-style: solid; 常用的线条样式：solid实线 dashed虚线 dotted点线 边框的颜色： border-color: red; 综合写法：border:边框宽度 边框样式 边框颜色； Padding相关设置（不同方向的设置）： padding：30px； 表示四个方向的取值都一样； padding：30px 60px； 表示：上下 左右 取值； padding：30px 50px 60px； 表示：上 左右 下 取值； padding：30px 40px 50px 60px； 表示：上 右 下 左 取值； 注意：添加了padding和border盒子会撑大： text-align: center; 和margin:auto; 的区别margin 只能让块级元素居中显示，而且必须要有固定的宽度。 text-align: center 本来的意思是让文本居中，实际也可以让行内元素、行内块元素居中显示，如果想要用text-align: center;让行内元素和行内块元素居中，我们必须要有一个父级元素将行内元素和行内块元素包裹起来，然后设置父级盒子的text-align: center;但是实际工作中我们不建议这么使用。 插入图片和背景图片区别内容一般用插入图片，装饰性的小图标一般用背景图片； 插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置； 背景图片移动位置用背景图片额度定位background-position进行设置； 并列垂直外边距合并两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁； 解决方案：不要同时设置，只给一个盒子设置即可； 嵌套垂直外边距合并如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来； 解决方案：1为父级设置上边框（不用）；2直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；3直接给父级添加overflow:hidden;（常用方法）---强制区分了父子级关系盒子圆角正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%; 胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半； 盒子阴影box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/ 外阴影； 水平阴影：让阴影在水平方向位移 垂直阴影：让阴影在垂直方向位移 模糊距离：阴影的羽化（虚实）大小 阴影大小：设置阴影的大小，一般不设置 阴影颜色：设置阴影的颜色 内/ 外阴影：默认是外阴影 ，inset是设置内阴影 文字阴影同理 网页布局的三种机制普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table； 行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em； 浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示； 定位：将盒子在浏览器的某一个位置，后期会经常用到； 浮动的特点浮：浮动之后的元素脱离了标准流； 漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来； 特：1、浮动之后的盒子的显示模式会更改为行内块元素的特点； 2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐； 3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行； 关于图片插入底部留白Html中插入图片的时候会出现2-4px的底部留白 解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；02、将图片转换为块元素display:block; -- 不建议使用。 overflowoverflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉； overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示 列表布局父级盒子装不下最后一个掉下来问题布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来， 解决方案：直接给父级盒子的宽度大于版心盒子即可； 定位属性：position 取值不同实现的效果不同，如下：静态定位：position:static; 相对定位：position:relative;特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面； 绝对定位：position:absolute;参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位； 固定定位：position:fixed;参照物：电脑屏幕（可视窗口）； 定位的叠加书序z-indexz-index是定位的z轴显示： 只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位； 取值：0，正整数，负整数，默认值0； 鼠标的手型图标cursor:pointer; display显示与隐藏隐藏：display:none; 属于不占位隐藏 显示：display:block; 将隐藏的元素显示出来 visibility显示与隐藏占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的； overflow溢出隐藏overflow:hideen;溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了； overflow:scroll;显示横向和竖向的滚动条显示（不用）； overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）； vertical-align:middle;让行内元素、行内块元素垂直居中；
| 
收藏
淘帖
踩
