HTML 和 CSS基础知识
关注
分享
扫一扫
专注前端不可自拔
wendZzz
若有需要请联系微信号：coolbigflower
微信公众号：前端一起学
展开
-
CSS3新特性-多栏布局
为了实现类似报纸，杂志的多列排版的布局，CSS3新增了一个多列布局模块（css multi column layout module）。主要应用在文本的多列布局方面。语法：colums:<column-width> || <column-count>譬如三栏布局，每栏内容宽度为150pxcolumns: 150px 3;column-width属性...原创 2018-11-13 09:39:45 · 1642 阅读 · 0 评论 -
响应式布局的实现
响应式布局的概念响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。响应式布局的实现步骤当创建一个响应式网站，或者将非响应式布局改成响应式的时候，首先要关注的是元素的...原创 2019-03-27 17:21:12 · 553 阅读 · 0 评论 -
HTML5语义化标签
1、HTML5简化的标签（1）DOCTYPE文档声明<!DOCTYPE html>相较于之前的版本，HTML5没有指定具体版本，这就表示了最新的HTML版本。（2）<meta>声明HTML4.01中的meta声明决定了HTML文档中字符的编码方式，HTML5直接一个charset属性即可，<meta charset="UTF-8">...原创 2018-09-17 14:52:16 · 5977 阅读 · 0 评论 -
HTML知识补充-标签
目录1、有序无序列表（1）有序列表（2）无序列表2、图片标签3、a标签（1）超链接作用（2）锚点（3）拨打电话（4）发送邮件4、表单标签5、选择框6、下拉框HTMl和CSS的相关知识在之前就已经学习过了，最近又重温找了相关视频看了一遍，仍然有许多自以为知晓却还是陌生的地方，果然好记性不如烂笔头。此外，一直不知道HTMl全称为hyperText m...原创 2018-08-16 09:52:50 · 378 阅读 · 0 评论 -
CSS知识补充-选择器
目录一、CSS二、CSS引用 三、选择器1、简单的选择器2、复杂选择器（1）父子选择器（派生选择器）（2）直接子元素选择器（3）并列选择器（4）分组选择器3、权重计算CSS相关知识复习时，深究了一些发现自己知道的还是很少，之前只是会用却不了解所用的到底是什么，学海无涯。一、CSS首先第一点还是要知道一直说的CSS全称是什么，即cascading ...原创 2018-08-16 16:39:23 · 346 阅读 · 0 评论 -
CSS补充知识-浮动
CSS中分有盒模型、层模型、浮动模型。当两个块级元素中第一个块级元素浮动时，第二块级元素会占据第一个原来的位置，第一会覆盖住第二个，然而这不是层模型中的层次覆盖。浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素都是看不见的，也就会覆盖它们，.box1{ width:100px; height:100px; background-color:black; ...原创 2018-08-20 14:25:51 · 377 阅读 · 0 评论 -
CSS补充知识-文字溢出处理和文字图片代替问题
1、文字溢出问题文字溢出分为单行文本和多行文本。单行文本溢出处理固定的三个步骤，先是取消文本换行功能，然后再使溢出部分隐藏，隐藏部分用...显示。p{ width:100px; height: 20px; line-height: 20px; white-space:nowrap; overflow: hidden; text-overf...原创 2018-08-20 15:18:36 · 584 阅读 · 0 评论 -
CSS补充知识-position定位
目录1、绝对定位2、相对定位3、选择定位的要点4、块级元素在页面居中5、两栏布局6、经典bug（1）margin塌陷（2）margin合并1、绝对定位（1）脱离原来位置进行定位，（2）相对于最近的有定位的父级元素进行定位，若没有存在定位的父级，则相对于整个文档定位。div{ width:100px; height:100; ...原创 2018-08-22 14:46:07 · 258 阅读 · 0 评论 -
CSS 各种居中实现整理
<center>标签对其所包括的文本进行水平居中。text-align:centertext-align:center，在父容器里水平居中 inline 文字，或 inline 元素vertical-align:middle垂直居中 inline 文字，inline 元素，配合 display：table，display：table-cell，有奇效。line-...转载 2018-09-20 09:30:16 · 309 阅读 · 0 评论 -
CSS3新特性-选择器
属性选择器HTML中可通过各种属性给元素增加很多附加信息。譬如，用id属性将不同div区分。CSS3新增的3个属性选择器使得属性选择器有了通配符的概念，也感觉像是正则表达式的样子。E[att^="val"]E：选择匹配的元素E； att：元素E定义了属性att； ^：其属性值以val开头的任何字符串。E[att$="val"]$：其属性值以val结尾的任何字符串。E[at...原创 2018-09-29 11:39:20 · 388 阅读 · 0 评论 -
CCS3新特性-盒模型属性box-sizing
在找小项目练习时，自己的完成度不太好，就找别人的代码看，发现了box-sizing这个属性，遂在网上找了很多资料研究，自己再来整理一下加深印象。以往认知中，盒模型的组成： content(内容) + margin + padding+ border 组成。 浏览器有两种盒模型：W3C下的标准模型和 IE下的传统模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）...原创 2018-09-21 08:58:39 · 591 阅读 · 0 评论 -
CSS3新特性-变形
CSS3中对一个元素的变形通过 transform 及其一系列函数来实现。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法: transform: none|transform-functions;旋转rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一...原创 2018-10-08 16:34:32 · 319 阅读 · 0 评论 -
CSS3新特性-动画
关键帧Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}在一个“...原创 2018-10-09 10:49:06 · 363 阅读 · 0 评论 -
Flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模式提供最大的灵活性。flexbox布局常用于比较复杂的页面，可以轻松实现屏幕和浏览器窗口的大小发生变化时保持元素的相对位置和大小不变，同时减小了依赖于浮动布局实现元素位置的定义以及重置元素的大小。任何一个容器都可以指定为Flex布局..box{ display: flex;}行内元素也可以使用Flex布局....转载 2018-10-30 10:22:52 · 351 阅读 · 1 评论