Làm thế nào để phần tử block vào giữa trình duyệt.

<div id="mydiv">Test Div</div>
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
Hoặc:
#mydiv {
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*set to a negative number 1/2 of your height and number 1/2 of your width WHEN with , height auto*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}

Thêm một biên boder CSS , di chuột mà không di chuyển các yếu tố

Làm thế nào để khi hover vào phần tử thì boder của nó không làm dịch chuyển nội dung khi hover
Ví dụ:
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
}
cách giải quyết:
.jobs .item:hover {
background: #e1e1e1;
border-top: 1px solid #d0d0d0;
padding-top:-1px; =  lấy giá trị border cũ của phần tử trừ đi kích thước đường viền  
}

Chuyển sắc gradient với CSS

code: Linear Gradient
1 background:#006070;
2 background: linear-gradient(top, #648080 0%, #006070 100%);
3 background:-o-linear-gradient(top, #648080, #006070);
4 background:-moz-linear-gradient(top, #648080, #006070);
5 background:-webkit-gradient(linear, left top, left bottom, from(#648080), to(#006070), color-stop("% vị trí ","màu"));
6 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr ='#648080', endColorstr ='#006070');
7 background: -ms-linear-gradient(top, #648080, #006070);
Mô tả
Dòng 1: là mầu nền thuần bạn sẽ để đầu tiên trong trường hợp trình duyệt người dùng không hỗ trợ gradient thì chí ít nó cũng có được màu nền theo ý bạn
Dòng 2: dành cho trình duyệt nào không có vendor prefix theo chuẩn code của W3C
Dòng 3: được sử dụng cho trình duyệt opera từ phiên bản 11 trở lên, -o-linear-gradient có 3 tham số với tham số đầu tiên là hướng chuyển sắc bạn có thể thay bằng "bottom", "left", hoặc "right", hai tham số còn lại là mã mầu bắt đầu và màu kết thúc, bạn cũng có thể thêm các tham số màu và cả tỉ lệ phần trăm vị trí nữa cho thêm sặc sỡ, mã mầu bạn cũng có thể dùng chế độ màu rgab trong CSS3
Dòng 4: sử dụng cho trình duyệt firefox từ phiên bản 3.6, các tham số tương tự như trên
Dòng 5: sử dụng cho trình duyệt Chrome và Safari. Tham số đầu tiên linear là kiểu chuyến sắc, tham số thứ 2 ngĩa là mầu đầu tiên được chuyển từ bên trái và phía trên, tham số thứ hai nghĩa là mầu kết thúc được chuyển từ bên trái và phía dưới, bạn có thể thay "left" bằng "right" một trong hai tham số 2 và 3 để có được chuyển sắc theo một góc 45 độ, tham số thứ 4 và thứ 5 là mã mầu bắt đầu và kết thúc, để thêm màu vào các khoảng ở giữa chuyển sắc bạn dùng thêm các tham số color-stop("% vị trí ","màu")
Dòng 6: sử dụng cho trình duyệt Internet Explorer của Microsoft nó có thể làm việc trên cả phiên bản IE6 thậm chí cả IE5 tuy nhiên lại không làm việc trên IE9, trong bài viết sau tôi sẽ giới thiệu giải pháp gradient cho IE9
Dòng 7: sử dụng cho IE10 của Microsoft
Nguồn: sothichweb.com
Để biết thêm về các giá trị vị-trí có những vị trí cụ thể nào vào trang thuthuatweb tìm hiểu thêm.

Gradient bao gồm các kiểu:
Linear Gradient : dạng đường thẳng.
Ridial Gradient: dạng tròn.
Angle Gradient: dạng góc.
Reflected Gradient: dạng phản chiếu.
Diamond Gradient: dạng kim cương.

tham khảo:http://bcdonline.net/hieu-ung-chuyen-sac-gradient-backgrounds-css3/https://css-tricks.com/examples/CSS3Gradient/

Radial Gradient
#radial-position {
/* fallback */
background-color: #2F2727;
background-image: url(images/radial_fancy.png);
background-position: 80% 20%;
background-repeat: no-repeat;

/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

/* Opera cannot do radial gradients yet */
}

background: -webkit-gradient(radial, tọa độ(X1 Y1)-vị trí, độ lan rộng-kích thước x1y1 ,tọa độ( X2 Y2)-vị trí, độ lan rộng-kích thước x2y2, from(#màu bắt đầu -x1y1), to(#màu kết thúc x2y2));
 background:-webkit-gradient(linear, tọa độ(X1 Y1)-vị trí, tọa độ( X2 Y2)-vị trí, from(#maù bắt đầu), to(#màu kết thúc), color-stop("% vị trí ","màu"));

Các tham số quan trong:
- vị trí (tọa độ) 
- kích thước - kiểu - độ lan rộng
- mã màu (rgba, #,..)
- độ tràn màu - độ lẫn

Thuộc tính transform: rotate

Tâm trên trục tọa độ OXY : rotate(0;y)
Xoay chiểu - dương: là cùng chiều kim đồng hồ (trên xuống dưới, trái qua phải)

Xoay chiều - âm : là chiều ngược kim đồng hồ (dưới lên trên, phải qua trái)

Cài đặt LiveReload trên Sublime bản 3?"How do I install LiveReload on Sublime Text 3" .

Cài tiện ích mở rộng LiveReload trên chrome tự động reload trang khi chỉnh sửa code html, css, js... trên sublime text 3.

"How do I install LiveReload on Sublime Text 3" 
Bước 1:
Open package control (Shortcut : Ctrl+Shift+P) and search for Package Control: Add Repository
Bước 2:
Now comes a region to enter URL at bottom part of sublime text 3 window. Enter https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json.
Bước 3:
Again, open package control and search for Package Control: Install Package and then search for LiveReload in the upcoming window.
Bước 4:
Configure LiveReload Package Setting at Preferences > Package Settings > LiveReload > Setting - Default and paste this :

{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
Bước 5:
Now for your browser, install LiveReload plug in as below :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Don't forget to enable the LiveReload plugin in the browser once you have installed it, so you can see the code changes reflected in the browser right away.

Note: Chrome users, for LiveReload to support file:// pages, go to chrome://extensions/, check off  Allow in incognito and check off Allow access to file URLs.
Nguồn:stackoverflow

Khi lập trình với javarscript nên sử dụng toán tử === hay ==

Hai toán tử === và == đều có ý nghĩa so sánh bằng.
Vậy điểm khác nhau giữa toán tử === và == là gì?
Khi nào thì nên sử dụng toán tử ===, khi nào thì sử dụng ==
nên sử dụng === khi lập trình với Javascript, và hãy bỏ qua hoàn toàn toán tử ==.
- Khi sử dụng toán tử ==
VD: x==y;
Toán tử == sẽ cố gắng chuyển đổi kiểu của toán hạng nếu như hai toán hạng có kiểu khác nhau, và chỉ bắt đầu so sánh sự bằng nhau khi đã thực hiện đổi kiểu xong. Nếu kiểu khác nhau, một trong hai, hoặc cả hai toán hạng sẽ được chuyển về một kiểu chung, hay còn gọi là kiểu trung gian.
- Khi sử dụng toán tử ===
VD: x===y;
Toán tử === chỉ trả về true nếu như cả hai toán hạng đều cùng một loại và có cùng giá trị. Nếu so sánh khác loại, kết quả sẽ trả về false.
Nguồn: codeaholicguy.com

Muốn làm cho phần tử của mình phải giữ nguyên kích thước mặc dù có cộng thêm padding và border (box-sizing: border-box;)

Box Model trong CSS thì sẽ thấy có một đặc điểm khi sử dụng Padding và Border thì cái khung phần tử của bạn sẽ bị biến đổi kích thước nếu bạn có đặt thêm thuộc tính width và height để thiết lập kích thước cho nó. Ví dụ cái box của bạn có width là 500px và height là 500px (500×500 px)nhưng nếu bạn đặt thêm padding là 15px nữa thì cái khung của bạn sẽ có kích thước là 530×530 px. Bởi vì nếu cộng thêm pading là 15px nữa thì cái khung của bạn sẽ tự động cộng thêm 30px (15px cho top và và 15px cho bottom, tương tự với left và right), tương tự vớiborder.
Vậy thì nếu bây giờ bạn muốn làm cho phần tử của mình phải giữ nguyên kích thước mặc dù có cộng thêm padding và border thì sẽ cần phải dùng đến thuộc tính box-sizing. box-sizing là một thuộc tính sẽ giúp bạn có thể tính toán và làm chủ được kích thước của một phần tử dựa vào thuộc tính width và height đã được thiết lập bên trong. Hay nói cách khác, là bạn sẽ muốn thuộc tínhwidth và height là kích thước đã bao gồm border và padding.
Như vậy với ba giá trị này, mình khuyến khích các bạn chỉ nên sử dụng giá trị border-box vì nó rất đầy đủ, dễ tính toán cho website.
Nguồn: thachpham.com

::before và ::after trong CSS (:before, after)

Ý nghĩ của việc sử dụng before, after là gì?
- Mục đích ban đầu của before after là dùng để thêm 'content'.
- Và chỉ khi property content: '' của before, after được thiết lập thì nó mới xuất hiện. (được gọi ra)
Vậy, để gọi nó ra thì lúc nào cũng phải có content: '';
- Và display mặc định của nó là inline (hình như dậy) mà kệ. inline hay cái gì cũng không quan trọng, vì mình sẽ set nó về table, còn tại sao mình thích display: table; cho nó khi dùng clear: both; thì tại vì table nó sẽ ôm sát vô nội dung hết. mà cái này làm gì có nội dung gì :v cho nên.... chúng ta được 1 cái ... kiểu kiểu như là div có height: 0px width: 0px vậy đó ^^
Sở dĩ có : và :: là để phân biệt giữa pseudo class và pseudo element, dành cho những người thích sự chặt chẽ.
ví dụ:
li:first-child là pseudo class, vì nó ko thêm vào phần tử nào cả mà chỉ bổ nghĩa cho li
div::after là pseudo element vì nó thêm 1 phần tử ảo vào đằng sau div, IE8 chưa hỗ trợ ::

Working with transitions

<ul class="house-col-6">
<li><a href="#" title="">home</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project1</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project2</a><span class="hover-menu"></span></li>
<li><a href="#" title="">project3</a><span class="hover-menu"></span></li>
<li><a href="#" title="">contact</a><span class="hover-menu"></span></li>
</ul>
.hover-menu{
display: block; /***/
width: 90%;
margin: 0 auto;
background: #5aae2c;
position: absolute;
top:-40%;/***/
height: 40%;

}
li:first-of-type .hover-menu,li:hover .hover-menu{
top:0;/***/
-webkit-transition: top  1s ease;
-o-transition: top  1s ease;
transition: top  1s ease;
}

Cách đặt tên class cho đối tượng theo quy tắc BEM

1. BEM (Block, Element, Modifier) ​​là một tiêu chuẩn công nghiệp phổ biến để đặt tên sử dụng prefixing, gạch dưới và dấu gạch ngang.
.block {} Đại diện cho khối cao nhất.

.block__element {} Đại diện cho khối con, tiếp nối theo sau khối cao nhất(khối cha)--> dùng 2 dấu gạch dưới

.block--modifier {} Đại diện ngang hàng với tên class trong khối, có tác dụng để thay đổi css của đối tượng cùng cấp ban đầu. --> dùng 2 dấu gạch ngang.
Đặt tên Class: Nên viết thường các ký tự: name, class ghép 2 danh từ nên đặt kiểu : className
đối với đặt tên id, tên class thì sẽ dùng phương pháp Lower Camel ( tức là sẽ viết hoa chữ cái đầu tiên của từ thứ hai trở đi※)

※ Ví dụ: dạng indexTest

2. Cách đặt tên khác
tên Class viết thường,
- Class cùng cấp:  class=" btn btn-default"
- Class cấp cha, con: class="media"
>class="media-music"
>class="media-film"
ĐẶT TÊN CLASS, ID phải thể hiện rõ 2 yếu tố "ở đâu""thể hiện cái gì"

Tổng hợp tên id, tên class rất hay dùng

vùng, miền	tên id, tên class
tổng thể page	container
header	header
tiêu đề của site	siteTtl
logo	logo
Catchphrase	catch
navigation	nav
global navigation	gNav
breadcrumb navigation	pagePath
content area	conts
main content	main
sidebar	side,sideBar
footer	footer
bài viết	article
chủ đề	topic, topics
thông tin chú ý	spotLight
chọn lọc	pickup
tiếp theo	next
trở về trước	pre
đến trang Top	pageTop
muốn xem nhiều nữa	more
thông báo	info
tin tức	news
ngày tháng	date
lịch sử update	history
list	list
các mục	item
list các sản phẩm	goodsList
khu vực ảnh	photo,img
khu vực text	txt
khu vực figure	figure
chú thích	notes
banner	bn
thông tin liên lạc	contact, inquiry
bài viết	article
ẩn đi	hidden
quảng cáo	pr
vị trí hiện tại	current
câu lead	lead
đề mục đầu tiên,đề mục cuối cùng	first(đầu tiên), last(cuối cùng), firstChild, lastChild
cột lẻ, cột chẵn	odd(số lẻ), even(số chẵn)
box dành cho layout	unit, box, col, area
box kết hợp ở các vùng miền khác	box,area

QUY TẮC ĐẶT TÊN CHO ĐỐI TƯỢNG LIÊN QUAN
file: tất cả viết bằng chữ thường, ngăn cách bằng dấu gạch ngang.
file ảnh được đặt dựa trên quy tắc sau:
「Tên page」「vùng miền」「chủng loại：bắt buộc」「chi tiết」「ký hiệu (serial number)」「trạng thái」「đuôi mở rộng」.
Mỗi bộ phận sẽ cách nhau bởi dấu gạch dưới 「_」

chủng loại	quy tắc
ảnh, sơ đồ	img
thumbnail	thumb
banner	bn
button	btn
logo	logo
navi	nav
tiêu đề ※１	ttl
text	txt
icon	icon
Background (ngoài background của icon)	bg
mũi tên	arrow
line	line
pagetop ※２	pagetop
spacer ※２	spacer
đang loading ※２	loading