HTML&&CSS
关注
分享
扫一扫
沭瑾
这个作者很懒，什么都没留下…
展开
-
（3）HTML&&CSS笔记（盒子模型）
1、盒子模型<!doctype html><html> <head> <meta charset='utf-8'/> <title> Document </title> <meta name='keywords' content=''/> <meta name='description'...原创 2019-07-25 11:39:26 · 162 阅读 · 0 评论 -
（16）HTML&&CSS笔记（渐变，倒影）
1、线性渐变（linear-gradient）background-image:来作为属性渐变样式是从上往下的：确定方向：确定单方向to right，to top，to left，to bottom确定对角方向to right bottom，to right top，to left bottom，to left top单位：%，px<!DOCTYPE html&...原创 2019-07-26 18:56:11 · 173 阅读 · 0 评论 -
（17）HTML&&CSS笔记（过渡，动画）
1、transition-property 过渡属性默认为all；也可以为具体的某个属性（attr），如果有多个属性值的情况，就用逗号隔开；2、transition-duration 过渡时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2019-07-26 21:54:33 · 176 阅读 · 0 评论 -
（18）HTML&&CSS笔记（2D）
1、transform（变换）rotate 旋转deg为旋转角度，旋转值可以是正值也可以是负值；scale 缩放值可以为负值；scale（number）：一个值的时候，x与y方向同时进行缩放；scale（number，number）：两个值的时候，单独对应的值控制对应的方向；translate 位移translate（number）：单独控制x轴的方向；translate（nu...原创 2019-07-27 08:17:53 · 137 阅读 · 0 评论 -
（19）HTML&&CSS笔记（flex布局）
1、弹性盒子模型（flex容器）：定义弹性伸缩盒容器类型用法：display：flex；将对象作为块级弹性弹性盒模型；display：inline-flex；将对象作为内联块级弹性弹性盒模型；（之前学过display：block/inline-block；）2、flex容器采用flex布局的元素，称为flex容器（flex container），简称“容器”。3、flex项目它的所...原创 2019-08-09 15:14:03 · 128 阅读 · 0 评论 -
（20）HTML&&CSS笔记
1、css继承：从某个元素继承属性常见的文本样式，字体样式都可以继承；继承父级属性可以用inherit； .wrap{ width:100%; height:300px; border-bottom:5px solid #000; text-align:center; ...原创 2019-08-09 17:03:32 · 134 阅读 · 0 评论 -
外部样式表的调用
1、第一种写法：<link rel="stylesheet" type="text/css" href="目标文件路径及全称" />2、第二种写法：<style type="text/css"> @import url(目标路径及全称);</style>link和@import的区别（建议使用link元素加载外部样式表）本质上，这两种方式都是为...原创 2019-08-29 20:28:46 · 1387 阅读 · 0 评论 -
选择符的权重（特殊性）
css中，用4位数字表示权重，权重的表达方式如：0,0,0,0类型选择符的权重为：0001类（class）选择符的权重为：0010ID选择符的权重为：0100伪类选择符的权重为：0010包含选择符的权重为：包含选择符权重之和内联样式的权重：1000通配符权重：0000伪元素选择符的权重为：0001子选择符的权重为：0000属性选择符的权重为：0010继承样式权重为：0000...原创 2019-08-29 20:51:48 · 451 阅读 · 0 评论 -
css属性
1、css属性1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration）注：声明又包括属性（Properyt）和属性值（Value）2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；3）css属性值 ：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）。2、关于文本的css声...原创 2019-08-29 22:09:53 · 515 阅读 · 0 评论 -
在写高度自适应时遇到高度坍塌的问题及解决办法
问题描述：通常在写高度自适应的时候，父级的高度通常要设置成自适应，其在页面显示的真正高度其实是由子元素撑开的高度。通常在这种自适应的页面中，布局通常会用到浮动，让子元素浮动起来，可以在同一排显示，但是子元素浮动后会脱离文档流，这会导致其父级失去高度，从而造成高度坍塌的问题。如下图：由于子元素现在为空，所以父级ul的内容为空，所以只显示边框上图代码： <style> ...原创 2019-08-31 16:33:06 · 396 阅读 · 0 评论 -
（15）HTML&&CSS笔记（HTML5标签，hsl颜色）
1、html5 最新版本；canvas、svg、数据交互、css3动画效果、css3选择器；2、h5 结构标签header 头部标签section 板块标签nav 导航栏footer 页脚aside 侧边栏，轮播图，nav导航栏3、语义化标签article 文章标签或内容标签hgroup 标题组的标签time 表示时间或日期的标签address 地址标签mark ...原创 2019-07-26 18:14:07 · 1044 阅读 · 0 评论 -
（14）HTML&&CSS笔记（表格，iframe）
1、table：定义标签的表格table特殊情况：border="num"是自带的属性（指边框的宽度）！表格简化内容：可以不加thead,tbody,tfoot,但是默认把所有的行与列都放到tbody里面去。样式问题：th,td自带一个像素的内边距。<body> <table border='1'> <!-- thead是表头 --&g...原创 2019-07-26 16:55:31 · 175 阅读 · 0 评论 -
（4）HTML&&CSS笔记（外边距合并）
外边距合并一个元素与另一个元素之间在垂直方向上合并起来。解决方案：1、给父级加内边距来撑开垂直方向的内容。<html> <head> <meta charset='utf-8'/> <title> Document</title> <meta name='keywords' content=''/> ...原创 2019-07-25 12:31:25 · 183 阅读 · 0 评论 -
（5）HTML&&CSS笔记（样式）
1、样式初始化：把你所有浏览器自带的默认样式来进行处理；可用 群组选择器：如果有共同的样式，可以使用群组选择器归类。body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,p{ margin:0; }2、display（样式类型）block 块级样式inline 内联/行内样式区分block与inline的特点：block 块级样式：独占一行支持宽...原创 2019-07-25 15:11:39 · 110 阅读 · 0 评论 -
（6）HTML&&CSS笔记（文本）
1、font：font-size：字体大小单位：px 像素（12px 为字体的最小字体）% 百分比（相对于父级）em 倍数（相对于父级）rem 根倍数（相对于html根标签）color：字体颜色font-family：字体类型font-weight：字体粗细normal 正常字体bold 加粗100 瘦身细200 - 500 正常600以上都是 加...原创 2019-07-25 17:33:03 · 110 阅读 · 0 评论 -
（7）HTML&&CSS笔记（垂直对齐、背景样式）
1、vertical-align：垂直对齐方式baseline 基线对齐top 顶部对齐middle 中部对齐bottom 底部对齐什么情况才会产生这个垂直对齐方式的问题？垂直对齐：垂直方向上而不是水平方向；对齐：上对齐，中对齐，下对齐；适用范围：行内样式（inline）/行内块元素（inline-block）;2、块级样式属性块级元素默认宽度为100%；如果说需要...原创 2019-07-25 18:14:08 · 297 阅读 · 0 评论 -
（9）HTML&&CSS笔记（定位*）
1、定位：在网页中，我们是用来确定位置的。position：方位值：top 上bottom 下left 左right 右static 静态定位（方位值是不起作用的）relative 相对定位（方位值起作用）absolute 绝对定位（方位值起作用）参考系：除了静态定位之后，其它都可以作为参考；如果没有参考系，默认为body来进行参考；作为参考物需要满足的要求：...原创 2019-07-25 19:55:57 · 160 阅读 · 0 评论 -
（10）HTML&&CSS笔记（伪元素，高级选择器）
1、选择器群组选择器：同时匹配共同的样式，元素与元素之间用逗号隔开；后代选择器：同时匹配A元素的后代B元素，两元素之间用空格隔开；子元素选择器：匹配A元素的子代B元素，两元素之间用大于隔开；毗邻选择器：B元素紧跟随着A元素，两元素之间用 + 隔开2、属性的选择器attr：属性val：属性值[ attr ]：所匹配具有这个属性的元素；[ attr=val ]：所匹配具有这个属性而且...原创 2019-07-25 23:23:19 · 113 阅读 · 0 评论 -
（11）HTML&&CSS笔记（BFC，书写顺序）
1、BFC（Block Formatting Context 块级格式化上下文）：指页面中一个指定的区域，并且给一套渲染规则，他会去决定子元素如何去定位；触发BFC机制：overflow：非visiable;display:inline-block;float:left/right;position:absolute/fixed;解决什么样的问题：（1）防止外边距合并的情况...原创 2019-07-26 10:44:47 · 137 阅读 · 0 评论 -
（12）HTML&&CSS笔记（表单）
1、form的属性action 规定表单提交到哪个地址；target 规定链接地址在哪个窗口打开；_self 在本窗口打开_blank 新窗口打开name 表单的名字method 表单的提交方式getpost<form name='kaidyHobby' action="http://www.baidu.com" target='_blank' method='ge...原创 2019-07-26 11:38:50 · 173 阅读 · 0 评论 -
（13）HTML&&CSS笔记（伪元素，选择器优先级）
1、伪元素 ::after，::before（两个冒号兼容IE9以下）使用方法如下<style> p{ border:5px solid #000; background-color: #ff0; font-size:20px; } p::after{ ...原创 2019-07-26 15:53:26 · 210 阅读 · 0 评论 -
文本标签在div内水平垂直居中显示
在写页面时，通常导航栏和页面最底部的信息一般都是文字信息，而且都是居中显示的。能实现这种效果的方法有很多，用定位或者浮动都可以，我今天就介绍两种别的方法来实现这种效果。1）给父级元素加display：table；text-align：center；给子元素添加display：table-cell；vertical-align：center；上图代码：<style> ...原创 2019-08-31 17:05:28 · 2491 阅读 · 0 评论